0

我是 jQuery 的新手。我有一个具有唯一 ID 的动态生成的行。我需要对每一行应用一个 jQuery 函数。

我的 jQuery 函数在页面加载后立即启动，而不是等待我点击。

<script type="text/javascript">
$(function popup() {
  $(this).hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
});
</script>

我希望 jQuery popup() 函数在我单击“tr”行时执行它的操作，并且只影响该特定行。

<tr id="abc" onclick="popup()">
  <td>blah</td>
</tr>
<tr id="def" onclick="popup()">
  <td>blah</td>
</tr>
<tr id="ghi" onclick="popup()">
  <td>blah</td>
</tr>
4

4 回答 4

1

使用选择器指定函数应应用于哪些元素，然后将该选择传递给适当的 jQuery 方法：

$('tr').click(
    function(){
        popup();
    });

在上面的函数popup()中，只有当有人点击一个tr元素（或其子元素，因为点击会冒泡）时才会调用该函数。

on()如果要在初始 DOMReady 事件之后动态添加任何tr元素，您也可以使用：

$('tbody').on('click','tr',function(){
    popup();
});

事件绑定到on()最接近动态添加的元素的元素，并且该方法被传递一个事件类型（click）和可选的选择器（tr），以确定哪些元素将触发在方法。

但请记住，根据您用于弹出窗口的元素，anid只能用于文档中的一个唯一元素。

参考：

于 2012-06-14T20:10:50.050 回答
0

像这样调用 Onclickthis

<tr id="abc" onclick="popup(this)">
  <td>blah</td>
</tr>

然后popup改为

function popup(elem) {
  $(elem).hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
}

你的语法

$(function popup() {

不正确应该是

$(function(){
     function popup() {
     ....
     ....
于 2012-06-14T20:09:11.387 回答
0

将类添加到“ popup ”元素：

<tr id="abc" class="pop-up-class" >
  <td>blah</td>
</tr>
<tr id="def" class="pop-up-class" >
  <td>blah</td>
</tr>
<tr id="ghi" class="pop-up-class" >
  <td>blah</td>
</tr>

然后在你的脚本中：

$(function() {
  $('.pop-up-class').hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
});
于 2012-06-14T20:12:16.753 回答
0

我猜您的意思是将click事件绑定到 TR 行，而不仅仅是调用该函数。将函数绑定到 DOM 元素的正确方法是将回调函数绑定到它们。这允许您为一组元素定义一个回调函数，然后在触发事件的元素的上下文中执行代码。当一个事件被触发时，绑定的回调被执行，并this成为 DOM 元素。

此外，您的 jQuery 代码应该被包装在一个事件中，该事件将在 DOM 准备好时触发；此时可以确定您的 DOM 已完成加载，确保您想要绑定事件的元素存在。

最后，您可以像这样重写您的回调：

<script type="text/javascript">
$(document).ready(function(){
    $("tr").on("click", function() {
    $(this).hover(function() {
        $("div#pop-up").show();
      }, function() {
        $("div#pop-up").hide();
      });
    });
});
</script>

更多解释和示例：http ://api.jquery.com/hover/

你还应该知道：

  • 如果您需要根据悬停的元素采取行动，则hover事件内部也将是上下文元素。this
  • jQuery.on()会将事件绑定到匹配选择器的元素，即使它们还没有在 DOM 中，允许您动态插入元素并且仍然将事件绑定到它们。
于 2012-06-14T20:13:28.720 回答