Question

我正在使用jquery .clone()根据用户点击次数将HTML添加到我的页面。

我想在新创建的HTML中添加onclick处理程序。我知道.on()可用于触发未来创建的HTML上的事件，但我相信必须在创建HTML之前编写（并执行）。

在此example code中，如果用户从选择列表中选择“related_id”，则jquery会创建一个用户可以输入ID的字段。我想在这里添加一个ajaxy的东西，这样用户就可以输入相关项的名称而不是它的id。 ajax请求取决于用户选择的字段。

一般来说，我知道如何使用jquery创建ajax请求，但是如何将特定于字段的ajax代码添加到我刚创建的HTML中？

Answer 1

你的jsfiddle里面有很多代码，其中大部分与这个问题无关。无论如何，如果我正确地理解你，那么你要求澄清的是相当高级别的。

我要做的第一件事是确保在所有新元素中加入一个共同的class。然后，您将使用.on()绑定到click事件，如下所示：

$("#parentElement").on('click','.newClass', function() {
    var me = $(this).text(); //gets the specific text from each .newClass element when clicked
    doAjaxRequest( me );
}

注意#parentElement必须在创建此单击处理程序之前存在于DOM中。

您的doAjaxRequest功能将类似于以下内容：

function doAjaxRequest( elemText ) {
    $.ajax({
        ...
        data: elemText,
        ...
    });
}

从jQuery 1.7开始，注意.on()可用。对于旧版本，请参阅以下options：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

对于1.4.4版。代码如下：

$("#parentElement").delegate('.newClass', 'click', function() {
    var me = $(this).text(); //gets the specific text from each .newClass element when clicked
    doAjaxRequest( me );
}

Answer 2

您可以插入<script type='text/javascript'> ... your jquery code here </script>标记以及HTML的其余部分。

Answer 3

为什么不在将处理程序添加到文档之前将处理程序绑定到$clone？

$clone.on("change", function(){
  //Do my AJAX  
});

如何将事件绑定到页面加载后生成的HTML？

3 个答案: