如何使用jquery将innerHTML或.html（）中的元素集作为目标_Jquery_Innerhtml

如何使用jquery将innerHTML或.html（）中的元素集作为目标

jquery

如何使用jquery将innerHTML或.html（）中的元素集作为目标,jquery,innerhtml,Jquery,Innerhtml,我有一个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=

我有一个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的范围的警报有效，但使用innerHTML或.html设置的id警报无效，因此如何修复此问题

先谢谢你

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

下面是提示：

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

问题是：

将对象添加到dom后，必须附加侦听器

因此，在.html之后

。on也是一个选项。如果侦听器是否渲染到dom，则可以绑定独立的侦听器。但我推荐第一种方法。如果您正在编写更大的应用程序，那么在创建之后附加处理程序的方法会更清楚，那么事件委派会自动附加事件处理程序，而您甚至不会注意到。对于1或2，这是可以的，但如果要将多个事件添加到多个对象标记、类中，则可能会疏忽…

在将对象添加到dom后，必须附加侦听器

因此，在.html之后

。on也是一个选项。如果侦听器是否渲染到dom，则可以绑定独立的侦听器。但我推荐第一种方法。如果您正在编写更大的应用程序，那么在创建之后附加处理程序的方法会更清楚，那么事件委派会自动附加事件处理程序，而您甚至不会注意到。对于1或2，这是可以的，但如果您要将多个事件添加到多个对象标记、可能会失去监督的类…

使用事件委派绑定单击处理程序，用于此

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

使用事件委派绑定单击处理程序，用于此

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

这里的问题是，当您这样编写时

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

。。它将仅为执行代码时存在的元素创建事件处理程序。它不会为将来的元素创建事件处理程序，即使它们在本例中具有相同的jQuery选择器元素

当事件在层次结构中冒泡时，您需要在父元素上绑定.onevent、selector和函数。这样，您就可以从指定的选择器处理将来的事件。就我个人而言，我会这样做：

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

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

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

。。它将仅为执行代码时存在的元素创建事件处理程序。它不会为将来的元素创建事件处理程序，即使它们在本例中具有相同的jQuery选择器元素

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

您应该使用委托

按照你的代码

您应该使用委托

按照你的代码

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

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