jquery - jquery委派ui按钮分配

Question

ui .button使用方法委托进行分配的正确语法是什么.on？

我尝试过这种结构，但没有成功：

$("body").on("load","a.button",function(){ $("a.button").button(); });

口头上：加载页面后，使用 ui .button 方法将每个 .button 类元素转换为图形模式。包括动态加载的内容。

Answer 1

委托时，您的处理程序绑定到父元素 ( body) 的事件，触发时它将a.button在其自身中查找与您的选择器 ( ) 匹配的任何元素。

这就是为什么您的示例不起作用的原因，因为没有用于 DOM 插入/突变的事件（该load事件不能像那样工作）。.button()插入后，您必须自己触发元素。

如果您想花哨并使用自定义事件来处理动态插入内容的任何更新，您可以执行以下操作：

HTML

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

JavaScript

// Custom event listener to update the content on demand
var container = $("#container").on("update", function() {
    // Turn any a.button elements into jQuery UI buttons
    $("a.button", container).button();
});

// Get some content
$.get("/foo", function(html) {
    // Insert content to container and trigger an update
    container.html(html).trigger("update");
});

注意：为了更清晰的演示，我添加了容器元素。document.body如果您愿意，这将在没有它的情况下工作，并且可以直接使用。

如果您想update在加载时触发自定义事件，只需将其添加container.trigger("update")到您的文档中即可。

Answer 2

希望这可以帮助：

$(function() {
    $( "input:submit, a, button", ".demo" ).button();

    // Original example method
//    $( "a", ".demo" ).click(function() { return false; });

    // on(), if you're not loading the targets after page-load
//    $( "a", ".demo" ).on ("click", function() { return false; });

    // on(), if you are loading the targets after page-load
    $( document ).on ("click", "a, .demo", function() { return false; });
});​

在这里演示：http: //jsfiddle.net/FG6rd/