jquery函数不使用Ajax返回/呈现的页面[重复]

这是一个 纯JavaScript 没有任何库或插件的解决方案:

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

哪里 hasClass 是

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

Live demo

信用卡给了戴夫和西米·维达斯

使用更现代的JS, 哈斯class 可以实现为:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

文件中有一个很好的解释 jQuery.fn.on .

简而言之:

事件处理程序仅绑定到当前选定的元素;它们必须在代码调用时存在于页面上 .on() .

因此在下面的例子中 #dataTable tbody tr 在生成代码之前必须存在。

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

如果向页面中注入新的HTML,最好使用委托事件来附加事件处理程序,如下所述。

委托事件 其优点是,它们可以处理以后添加到文档中的后代元素中的事件。例如,如果表存在,但行是使用代码动态添加的,那么下面将处理它:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

除了能够处理尚未创建的子代元素上的事件之外,委托事件的另一个优点是,当必须监视许多元素时,它们的开销可能更低。在数据表中有1000行 tbody ,第一个代码示例将处理程序附加到1000个元素。

委托事件方法(第二个代码示例)只将事件处理程序附加到一个元素,即 表格主体 ,并且事件只需要向上冒泡一个级别(从单击的 tr 到 表格主体 )。

注: 委派的事件不适用于 SVG .

自jquery 1.7起 你应该使用 jQuery.fn.on :

$(staticAncestors).on(eventName, dynamicChild, function() {});

在此之前 建议的方法是 live() :

$(selector).live( eventName, function(){} );

然而, LIVER() 在1.7中被否决,赞成 on() ,并在1.9中完全移除。这个 LIVER() 签名:

$(selector).live(eventname,function());

…可替换为以下内容 on() 签名:

$(document).on( eventName, selector, function(){} );

例如,如果您的页面正在使用类名动态创建元素 dosomething 您将事件绑定到 已存在的父级 (这是问题的关键所在,您需要一些现有的内容来绑定,而不是绑定到动态内容),这可以是(也是最简单的选项) document . 尽管要记住 document may not be the most efficient option .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

绑定事件时存在的任何父级都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here
});

将应用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>