元素出现后调用单击事件一次

Call Click Event Once After Element Appears?

本文关键字：一次 事件 单击 调用 元素      更新时间：2023-09-26

我使用 jQuery 1.6.2。当该元素出现在页面上时，我想只调用一次单击事件。这是我的选择器：

span[resizer='north'][title=''] :first-child"

这可以用于触发点击事件：

$("span[resizer='north'][title=''] :first-child").click();

如何使其仅在该元素出现在页面上后工作一次或工作？

根据我对您的最后一条评论的理解回答：我的意思是我只会调用一次点击事件。假设有一个按钮。我将调用该按钮的单击事件一次。我的意思是我将以编程方式单击该按钮。

$('button').click(function() {
    $('span[resizer='north'][title='']:first-child').click();
    $(this).unbind('click');
});
您可以使用

DOMNodeInserted事件来检测何时动态插入新元素。

var alreadyclicked = false; // variable to check that it will be clicked just once
$(document).bind('DOMNodeInserted', function(e) {
    if (!alreadyclicked){
        $("span[resizer='north'][title=''] :first-child").click();
        alreadyclicked = true;
    }
});

更新

DOMNodeInserted事件与其他突变事件一起被弃用。一些浏览器支持它，但看起来这不会持续很长时间。

您可以改用突变观察器来跟踪 DOM 中的更改

var alreadyclicked = false;
var observer = new MutationObserver(function(mutations, observer){
            //if new nodes were added
            if( mutations[0].addedNodes.length && !alreadyclicked )
                $("span[resizer='north'][title=''] :first-child").click();
                alreadyclicked = true;
        });
observer.observe( document, { childList:true, subtree:true });

使用自定义事件，并使用 .one（） 附加委托处理程序。

事件有 2 个组件，即触发和处理。 不要关注它被触发了多少次，专注于它被处理了多少次。

$("document").one("myclick", "span[resizer='north'][title=''] :first-child", function(e) {
  do something...;
  $(this).click(); //if you actually need the "click"
});
$("span[resizer='north'][title=''] :first-child").trigger("myclick");

此示例将意味着它被"处理"一次。 此处的其他答案可用于确保在添加元素时触发它（如果它在文档准备就绪之后）。

您也可以使用发布/订阅，这将使它更加容易。 然后，您只需从 ajax 或任何将添加元素的代码触发自定义事件，而不必担心专门针对元素。 订阅中的最后一行代码是取消订阅。

相关文章：