0

我希望每次初始化 Dom 元素时都会触发一个事件，如下所示：

HTML

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

<div id="clickme">Click me!</div>​

Javascript

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        i++;
    });

    // this event gets called only the first time #data element is ready
    // I want it to be called each time #data comes into being
    $('#data').ready(function() {
        alert('element data ready!');
    });
});

我试过了：

// doesn't work
$('#data').live('ready', function() {
    alert('element data ready (live)');
});

编辑：我有兴趣为 ajax 插入的元素执行此操作。例如：

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);
  });

  // this function operates on elements returned by the ajax call, so they are not available at this point.
  myFunction();

  // so I'd better call myFunction() when the ajax data is inserted
});

在这里摆弄：http: //jsfiddle.net/nf8CP/

4

4 回答 4

2

对于您更新的问题，只需将您的函数移动到回调中，您就完成了。

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);

      myFunction(); // Call it right here.
  });

 // myFunction();  // Not here!!!

});

有 DOM Mutation 事件，但我相信它们已被弃用，并且没有完整的浏览器支持。

还有livequery插件，但它真的是矫枉过正。

.ready()处理程序不处理单个元素的加载事件。仅适用于 DOM 加载事件。这三个示例都具有相同的行为：

  • $(document).ready(...
  • $('document').ready(...
  • $("#data").ready(...
  • $().ready(...

没有区别。传递给的参数$被忽略。

正确的解决方案是在创建元素时调用您想要的代码。

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        dataReady();
        i++;
    });

    function dataReady() {
        alert('element data ready!');
    }
});

此外，根据您的示例，一个更好且破坏性较小的解决方案是简单地修改文本，#data而不是使用.html().

于 2012-10-12T16:19:06.207 回答
1

你为什么不把你的 .ready 放在你的按钮点击里面，这样你就可以在每次点击它时查看它是否准备好了：

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data ' + i + '</div>');
        i++;
        $('#data').ready(function() {
            alert('element data ready!');
        });
    });
});​
于 2012-10-12T16:32:34.223 回答
1

您可以使用DOMNodeInserted：

$(document).on('DOMNodeInserted', function() {
    alert('element data ready (live)');
});

每当将节点添加到 DOM 时都会触发它。

您还可以过滤哪些节点触发此事件，如下所示：

$(document).on('DOMNodeInserted', '#data', function() {
    ...
}

现在它只会在data添加 ID 为的节点时触发。

于 2012-10-12T16:25:27.400 回答
1

ready（或更准确地说DOMContentLoaded）仅在页面被完全解析时触发一次。没有干净的方法来做你想做的事，所以你需要手动安装你的事件处理程序。（有 DOM 突变事件，但它们太吵了，你的页面会在试图处理它们时吃掉自己，除非你真的知道自己在做什么，否则这通常是个坏主意）。

但是，我怀疑您在这里真正想要的是事件委托。您需要将事件安装在#container而不是#data，因为当您的 ready 函数被调用时，现有#data节点将从 DOM 中删除！

例如：

$('#container').on('click', '#data', function() {
  alert('#data element was clicked!');
});

它的作用是安装一个处理程序#container（它永远不会改变），它使用选择器侦听click源自（或冒泡）子元素的事件#data。这意味着即使您不断替换 的内容#container，也不必在其内容上安装新的事件处理程序。

于 2012-10-12T16:22:17.370 回答