Question

使用ui方法委派来分配.button .on的正确语法是什么？

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

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

verbally：加载页面后，使用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/

jquery委托ui按钮分配

2 个答案: