Question

我无法在任何ajax生成的元素上使用任何事件（例如onlick）。我读到了关于jQuery＆＃34; .on＆＃34;功能，但我需要使用<div id="myId_1234" onlick="doStuff()">之类的东西。元素的ID是随机的，所以我不能使用

`$('.some-parent-class').on('click', '.element', function() {// DO STUFF!});`

我希望有人可以帮助我！感谢。

Answer 1

在使用

将事件处理程序添加到DOM之前，您可以将事件处理程序附加到AJAX响应中的元素

$(responseHtml).find('some selector').on('click', handler);

很可能有一个或多个attribute selectors适合您。

Ex：id以选择器

开头

$(responseHtml).find('div[id^=myId]').on('click', handler);

如果无法使用css选择器区分响应中的哪个元素，则必须修改生成HTML的服务器脚本，其中包含与您可以查找的模式匹配的唯一ID或类。

修改

您可以使用css类来标识每个元素。使用方法：

$('.myCloseButtonClass').on('click', function(){ $(this).parent.hide(); });

这里的关键是this对象。它将引用单击的特定元素，从而允许您仅关闭包含单击的关闭按钮的聊天窗口。

JSFiddle使用AJAX echo

Answer 2

我通过动态生成可点击的DIV元素来模拟Ajax Generated部分。

<强> HTML：

<div id="container">
</div>

JS：

$("#container").append(
    $('<div>').attr('id', 'randomId').html('New element')
);

$("#randomId").click( function(){
    alert('Clicked!!!');
});

编辑：使用类而不是Id的相同示例：

$("#container").append(
    $('<div>').attr('id', 'randomId').addClass('parent-class').html('New element')
);

$(".parent-class").click( function(){
    var clickedElementId = $(this).attr("id");
    alert('Element with ID ' + elementId + ' Clicked!!!');
});

工作fiddle

Answer 3

$('.some-parent-class').on('click', 'this put your id input', function() {// DO STUFF!});

proib与此......

Answer 4

您可以执行以下操作：

<div class="myBoxes">
    <div id="oneBox" onclick="myFunc(this.parentNode);">
        <p>Some content..</p>
    </div>
</div>

function myFunc(){
    // Code goes here
   alert('function fired!');
}

Ajax生成的元素上的触发事件

4 个答案: