0

我正在使用第三方评论插件，我想更改一些按钮的内容。这对于id提前知道 ' 的按钮很简单，但它也有在单击“回复”按钮之前不会出现的按钮。需要明确的是，这些元素在页面加载时不存在。它们在某些事件之后被插入到 DOM 中。对于那些元素，我只知道id.

我的第一个想法是使用.on, 并委托给回复容器的孩子，但load事件不会冒泡，所以这不起作用：

<script>
  $("#container").on("load", 'a[id|="reply-button"]', function(event) { $(this).html("different text");  } );
</script>

<div id="container">
  <a id="reply-button-42das56ds6d78a">some text</a>
</div>

下一个最好的事情是什么？

4

3 回答 3

1

“我知道当点击‘回复’按钮时它们会出现。当这种情况发生时，新元素被插入到 DOM 中，我知道这些元素的 id 前缀是什么。”

您可以使用DOMSubtreeModified事件之类的东西来判断何时添加元素，但并非所有浏览器都支持。（实际上它已被弃用。）

或者您可以将点击处理程序附加到“回复”按钮：

$(document).ready(function() {
    // initialise plugin here, then:
    $("some selector for the reply button(s)").click(function(e) {
        // setTimeout(function() {        
        $('a[id|="reply-button"]').html("different text");
        // }, 10);
    });
});

jQuery 确保多个事件处理程序将按照它们绑定的顺序运行，但当然这仅适用于使用 jQuery 添加的处理程序。因此，如果您使用的第三方评论插件也使用 jQuery，那么只需确保它首先被初始化，然后您自己的回复点击处理程序应该运行，届时它将能够访问插件添加的元素。

如果插件不使用 jQuery，您无法确定您的点击处理程序是否会最后运行，因此请取消注释setTimeout我上面显示的代码 - 它会等待几毫秒，让插件事件有时间运行，然后更新文本.

于 2012-08-21T22:51:05.660 回答
0

使用选择器$('#^=id')

id 是前缀

例如所有 id 开始 test123

$('#^=test123')

这适用于类似的事情

test1234
test12345
test123fgjfdgj

这可能会有所帮助： http: //oscarotero.com/jquery/

并使用 jquery 事件侦听器进行页面加载..

例如$(document).ready(function(){});

如果在单击按钮时加载它们，则执行..

$('#buttonid').click(function() {//handle click});
于 2012-08-21T22:19:33.300 回答
0

您正在寻找 DOM 突变事件。此规范允许您在插入、更改 DOM 节点等时收到通知。浏览器支持实际上并不存在，但...嗯，IE 落后（IE >= 9 支持）。它也是一个主要的性能猪。请参阅此 MDN 文档。由于这些原因，我认为这里的很多人不会建议使用它们。不过，这里有一些代码：

document.addEventListener("DOMNodeInserted", function(e) {
    if ($(e.target).is('selector matching new elements')) {
        //do what you want with e.target, which is the newly-inserted element
    }
}, false);

有一个提高性能的技巧，涉及监听 CSS 动画事件：here。唯一的问题是 IE9 不支持 CSS 动画。不过，我认为我们都在等待能够以跨浏览器和高性能方式使用这些事件的那一天。

于 2012-08-21T22:45:38.680 回答