2

编辑：问题已经解决，事实证明，Select2 库有一个用于此类型的自定义命令：

$("#element").on("change", function (e) { ... }
// Defined as "change"

我正在使用一个名为 Select2 3.2 的下拉菜单库。简而言之，代码采用一堆选择和选项标签，并生成一个很酷的下拉搜索列表。

但是，在网站渲染之后；当我单击“查看源代码”时，我所有的选择和选项标签仍然存在，但是当我右键单击新生成的精美菜单本身并选择“检查元素”（使用谷歌浏览器）时，html 完全不同。

我认为这是导致问题的原因，所有这些新代码都是从自定义库的 JS 中呈现的，并且在我的 jQuery 事件命令之后。

具体来说，这是我的命令：

$(document.body).on('click', '.select2-result-label', function() {
        var name = $(this).text();
        var post_to = '/myurl/';
        $.post(post_to, { dat: dat},
            function(response) {
                ...
            }, 'json'
        )

我相信 on() 方法会处理这种事情，但显然不是，任何帮助将不胜感激！

相关编辑：这是另一个 Stack Overflow 帖子的简介：

The view page source page shows you the exact text that 
was returned by the server.     

Inspect element actually shows you the fully rendered DOM tree.

知道了这一点，也许解决这个问题会更容易。

这是一个 JS Fiddle 相关的：

http://jsfiddle.net/JpvDt/47/

当您单击多栏中的“x”时，尝试使警报“工作”出现。现在我的代码可以注册包含 x 的类。

$(document.body).on("click", ".select2-search-choice-close", alert("worked"));
4

3 回答 3

2

场景一：

你的问题可能是你绑定了整个 DOM的方法，这真的很糟糕。因此，请始终尝试将其绑定到您的控件所在的最近的 div（最近的父元素）。

关于Jquery API的事件性能如下所示。

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免过度使用 document 或 document.body 来处理大型文档的委托事件。

场景二：

像下面这样调用你的 on 事件（带 off 事件）。

$(#yourElement).off('click').on('click', '.select2-result-label', function() {
        var name = $(this).text();
        var post_to = '/myurl/';
        $.post(post_to, { dat: dat},
            function(response) {
                ...
            }, 'json'
        )

我希望这对你有帮助。

于 2012-12-31T11:55:19.940 回答
1

事实证明，Select2 库有一个自定义命令，用于将来更改工具栏。在这里阅读更多：http: //ivaynberg.github.com/select2/#programmatic

请务必注意，许多标准化的 jQuery 调用不适用于 Select2，您必须使用它们的自定义设置。

$("#element").on("change", function (e) { ... }
// Defined as "change"
于 2012-12-31T21:30:03.787 回答
0

只需将 $(document.body) 替换为 $(document)

于 2012-12-31T11:55:18.157 回答