2

我有一个 div，其内容是从 innerHTML 动态生成的，我似乎无法使用 jQuery 来定位这些元素进行验证，例如这是页面：

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
</head>
<body>
<span id="alert1">Alert1</span>
<input type="button" value="Click Me" id="button1" />
<div id="empty"></div>
</body>
</html>

这是js代码：

<script type = "text/javascript"> 
    $(document).ready(function() {
         $('#button1').click(function() {
             var html = "uname <input type='text' id='uname'><br />password <input type='text' id='password'><br /><span id='alert'>Alert</span>";
             $('#empty').html(html);
         });
         $('#alert').click(function() {
             alert('Alert');
         });
         $('#alert1').click(function() {
             alert('Alert1');
         });
    });
</script>​

带有 id alert1 的 span 的警报有效，但对于使用 innerHTML 或 .html() 设置的 id alert 无效，那么如何解决这个问题？

先谢谢你了​</p>

4

5 回答 5

3

这里的问题是当你这样写时..

    $("#element").click(function() {
        alert("Alert!");
    });

.. 它只会为执行代码时存在的元素创建事件处理程序。它不会为未来的元素创建事件处理程序，即使它们具有相同的 jQuery 选择器（在本例中为“#element”）。

您需要做的是.on(event, selector, function)在父元素上绑定，因为事件“冒泡”层次结构。这样您就可以处理来自指定选择器的未来事件。我个人会这样做：

$(document).ready(function() {
     $('#button1').click(function() {
         var html = "<insert lots of html stuff here>";
         $('#empty').html(html);
    });

    $(document).on("click", "#alert", function() {
        alert("Alert!");
    });

    $(document).on("click", "#alert1", function() {
        alert("Alert1!");
    });
});​
于 2012-07-30T07:10:48.823 回答
1

你应该使用委托

$(elements).delegate(selector, events, data, handler);

根据您的代码

$(document).ready(function() {
  $("yourdiv").delegate("#alert, #button, #Alert1", "click", function() {
    alert('Alert');
  });
});
于 2012-07-30T07:14:33.080 回答
0

使用.on()而不是.click()在运行时绑定事件。您可以尝试.live()，但已弃用。

这是小提琴：http: //jsfiddle.net/Akyrk/

于 2012-07-30T07:05:22.530 回答
0

您必须在将对象添加到 dom 之后附加侦听器！

所以之后.html(...)

<script type = "text/javascript"> 
$(document).ready(function() {
     $('#button1').click(function() {
         var html = "uname <input type='text' id='uname'><br />password <input type='text' id='password'><br /><span id='alert'>Alert</span>";
         $('#empty').html(html);
         $('#alert').click(function() {
             alert('Alert');
         });
     });

});

​</p>

.on()也是一种选择。如果将侦听器渲染到 dom，您将独立绑定侦听器。但我推荐第一种方法。如果您正在编写更大的应用程序，那么在创建后附加处理程序的方法会更加清晰，然后事件委托会自动附加事件处理程序，您甚至可能没有注意到。对于 1 或 2 没关系，但如果您将多个事件添加到多个对象（标签、类），您可能会失去监督......

于 2012-07-30T07:06:26.713 回答
0

使用事件委托绑定点击处理程序，.on()用于此

     $('#empty').on('click', '#alert1', function() {
         alert('Alert1');
     });

或者您可以在创建内容后绑定处理程序。

于 2012-07-30T07:08:30.260 回答