Question

我在我的网站上创建了一个表单，并使用JQuery根据以前的选择显示/隐藏元素并添加更多字段。这很有效。

继续前进，我希望JQuery在用户使用onclick（$ .html）点击链接时动态地将此表单插入到DOM中。这也都有效。当用户点击链接时，该链接的表单会立即显示在页面上。

但是当表单加载$ .html时，我的其他JQuery语句（显示/隐藏元素等）不再有效。

我们是否可以在JQuery $ .html插入的元素上使用JQuery？

Answer 1

您可以将事件分配给使用jQuery创建的DOM元素。如果没有代码（你应该总是提供），我不能肯定地说，但我猜你正在覆盖你之前有一个事件处理程序的元素。

只要有可能，.append()新的HTML而不是覆盖它，那么您就不需要重新分配事件。如果你真的需要创建一个新元素，那么你有两个解决方案：

重新分配事件处理程序
使用事件委派在第一个未覆盖的父级上设置事件处理程序

See jQuery's .on() for more，但一般语法为：

$("#always-element").on("click", ".overwritten-elem-selector", function() {
    // work
});

这是一个完全无足轻重的例子(JSFiddle)：

<强> JS

var nums = 1;

$("#more").on("click", function() {
    var $newElem = $("<div></div>").text(++ nums);        
    $("#foo").html($newElem);
});

$("#foo").on("click", "div", function() {
    $(this).css("background-color", "#FF0000");
});

<强> HTML

<button id="more">More</button>
<div id="foo">
    <div>1</div>
</div>

Answer 2

是的，您可以在插入到DOM中的标记上使用jQuery，但是您必须确保该代码在之后将内容插入到页面中而不是的 之前。

要详细说明并展示我认为你遇到的问题，请考虑以下小提琴http://jsfiddle.net/47wVQ/：

您在DOM中有一些位置，您要插入元素：

<div id="testTarget"></div>

还有一些JS：

var elemBefore = $('<p id="thingToInteractWith">BEFORE</p>'); $('#thingToInteractWith').on('click', function(){ $(this).hide(); }); $('#testTarget').append(elemBefore); //At this point, the element is in the DOM //Below is what should be done instead var elemAfter = $('<p id="anotherThingToInteractWith">AFTER</p>'); //Binding AFTER element exists $('#testTarget').append(elemAfter); //At this point, the element is in the DOM //Here I'm binding the click action after the markup is in the DOM $('#anotherThingToInteractWith').on('click', function(){ $(this).hide(); });

如果您将新内容插入DOM（如表单）并希望显示/隐藏等处理新内容，那么请务必在使用$ .html后启动JS。

在您的具体示例中，这将是：

function bindEvents(){ //This assumes you have form elements with the following IDs $('#myFormElement1').on('change', function(){ $(this).hide() }); $('#myFormElement2').on('change', function(){ $(this).hide() }); } var $form; //We'll pretend this variable holds the markup for your form $('#target').html($form); //Your form is now in the DOM bindEvents(); //Since myFormElement1..2.. now exist, they can be interacted //with and so calling bindEvents after the $.html call will work

在$ .html插入内容上使用JQuery？

2 个答案: