在页面内部内容后添加或触发事件

Posted 2023-02-16

【中文标题】在页面内部内容后添加或触发事件

【英文标题】：Add or trigger event after inner content to page

【发布时间】：2014-01-06 17:46:39

【问题描述】：

我在表格上有编辑或删除元素的链接，这些元素可以被过滤。我使用 ajax 和 get 函数过滤并得到结果。之后我使用inner.html在表格上添加（显示）结果，这里的问题是过滤元素上的链接后不起作用，导致具有这样的dojo功能

dojo.ready(function()

    dojo.query(".delete-link").onclick(function(el)
    var rowToDelete = dojo.attr(this,"name");
    if(confirm("Really delete?"))
.......


);

我需要过滤后触发事件，有什么想法吗？

【参考方案1】：

（我假设您在这里使用的是 Dojo

快速回答是您需要将dojo.ready 中的代码提取到一个单独的函数中，并在Ajax 调用的load() 回调结束时调用该函数。例如，制作一个这样的函数：

var attachDeleteEvents = function() 
    dojo.query(".delete-link").onclick(function(el)
        var rowToDelete = dojo.attr(this,"name");
        if(confirm("Really delete?"))
            .......
        
    );
;

然后您在 dojo.ready 和您的 Ajax 调用完成时调用此函数：

dojo.ready(function()  attachDeleteEvents(); );
....
var filter = function(someFilter) 
    dojo.xhrGet(
        url: "some/url.html?filter=someFilter",
        handleAs: "text",
        load: function(newRows) 
            getTableBody().innerHTML = newRows;
            attachDeleteEvents();
        
    );
;

这是一个快速的答案。您可能想要研究的另一件事是事件委托。上面代码中发生的情况是每一行都有一个 onclick 事件处理程序。您也可以在表本身上有一个事件处理程序。这意味着在过滤表时无需将事件处理程序重新附加到新行。

在最新版本的 Dojo 中，您可以从 dojo/on 获得一些帮助 - 类似于：

require(["dojo/on"], function(on) 
    on(document.getElementById("theTableBody"), "a:click", function(evt) ...);

这将是整个表格主体上的单个事件处理程序，但您的事件侦听器只会在点击 <a> 元素时被调用。

因为（我假设）您使用的是 1.5 或更低版本，所以您必须做一些不同的事情。我们仍然只会为整个表格主体获取一个事件侦听器，但我们必须确保我们自己只对<a>（或子元素）的点击采取行动。

dojo.connect(tableBody, "click", function(evt) 

    var a = null, name = null;
    // Bubble up the DOM to find the actual link element (which
    // has the data attribute), because the evt.target may be a 
    // child element (e.g. the span). We also guard against 
    // bubbling beyond the table body itself.
    for(a = evt.target; 
        a != tableBody && a.nodeName !== "A"; 
        a = a.parentNode);

    name = dojo.attr(a, "data-yourapp-name");
    if(name && confirm("Really delete " + name + "?")) 
        alert("Will delete " + name);
    
);

示例：http://fiddle.jshell.net/qCZhs/1/

【讨论】：

我试过但没用，我使用的是1.6版本，过滤后我在这个变量中得到了null var rowToDelete = dojo.attr(this,"name");我正在使用 POST