如何使用 jquery 定位从 innerHTML 或 .html() 设置的元素答案

【问题标题】：How to target elements set from innerHTML or .html() using jquery如何使用 jquery 定位从 innerHTML 或 .html() 设置的元素
【发布时间】：2012-07-30 07:00:57
【问题描述】：

我有一个 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 警报不起作用，那么如何解决这个问题？

提前谢谢你

【问题讨论】：

标签： jquery innerhtml

【解决方案1】：

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

    $("#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!");
    });
});

【讨论】：

【解决方案2】：

你应该使用委托

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

根据您的代码

$(document).ready(function() {
  $("yourdiv").delegate("#alert, #button, #Alert1", "click", function() {
    alert('Alert');
  });
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您必须在将对象添加到 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');
         });
     });

});

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

【讨论】：