时间戳

首页 > 解决方案 > Javascript 不适用于新添加的 HTML

javascript - Javascript 不适用于新添加的 HTML

问题描述

您好我正在尝试创建一个部分显示的列表，如果您单击阅读更多，您将能够看到所有列表。我找到了这个插件：https ://github.com/solarmosaic/jquery-show-first

但是，当我尝试在从 javascript 新插入的 HTML 上使用它时，它不起作用。如果 HTML 在开头的 HTML 文件中，它可以工作。

这是我的代码的一部分：

var associatedEntities = associated[a].split("|");
                var personDone = false;
                var placeDone = false;
                var keywordDone = false;
                var itemDone = false;
                for (var d = 0; d<associatedEntities.length; d++){
                    if(associatedEntities[d].includes("@")){
                        var contents = associatedEntities[d].split('@'); 
                        if(associatedEntities[d].includes('person/')){
                            if(personDone == false){
                                associatedWithHTML+="<ul class = \"show-first\" data-show-first-count=\"3\">";
                                personDone = true;
                            }
                            associatedWithHTML+="<li><a target=\"_blank\" href=\"PersonResult.html?id="+contents[0].trim()+"\" >"+contents[1]+"</a><br></li>";

                        }else if (associatedEntities[d].includes('place/')){    
                            if(placeDone == false){
                                associatedWithHTML+="<ul class = \"show-first\" data-show-first-count=\"3\">";
                                placeDone = true;
                            }
                            associatedWithHTML+="<li><a target=\"_blank\" href=\"PlaceResult.html?id="+contents[0].trim()+"-"+contents[1]+"\" >"+contents[1]+"</a><br></li>";

                        }else if (associatedEntities[d].includes('item/')){
                            if(itemDone == false){
                                associatedWithHTML+="<ul class = \"show-first\" data-show-first-count=\"3\">";
                                itemDone = true;
                            }
                            associatedWithHTML+="<li><a target=\"_blank\" href=\"ItemResult.html?id="+contents[0].trim()+"\" >"+contents[1]+"</a><br></li>";
                        }
                    }else{
                        if(keywordDone == false){
                            associatedWithHTML+="<ul class = \"show-first\" data-show-first-count=\"3\">";
                            keywordDone = true;
                        }
                        associatedWithHTML+="<li><span>"+associatedEntities[d]+"</span><br></li>";  


                    }
                }
            }
            associatedWithHTML+="</ul><hr></div>";

            document.getElementById("DeedDate").innerHTML+=newHTML+associatedWithHTML+"</div>";

标签： javascripthtml

解决方案

页面加载后插入的 HTML 不会应用任何 javascript 事件/侦听器，这些事件/侦听器通常会应用于页面加载时具有匹配 id/选择器的元素（除非您使用 mutator 事件）。

您必须以某种方式设置事件侦听器，以便在插入 DOM 节点时“动态”添加事件。

//Jquery: Instead of this for attaching an event
$(".my-element").click(function() {

   //Some code here...

});

//Jquery: You will need to do this to catch all elements
$(document).on("DOMNodeInserted", ".my-element", function() {

     $(this).click(function() {

         //Some code here...

     });

});

//Vanilla javascript
document.addEventListener("DOMNodeInserted", function (e) 
{

     if(e.target.classList.contains("my-element")) {

         e.target.addEventListener("click", function() {

             //Some code here...

         });

     }

}, false);

现在，您是从插件的上下文中提出这个问题的，但这就是正在发生的事情。该插件不会将其事件应用于节点插入的事物，而是在页面加载时。您可以修改提供的代码来执行此操作，或者在您这边添加一些东西，在将节点插入到 DOM 时注册所需的事件。

注意：仅选择上述两个使用 DOMNodeInserted 的示例解决方案之一。这将替换该元素的正常“点击”事件注册。除了添加为同一选择器注册的 DOMNodeInsert 事件之外，不要注册单击事件。

推荐阅读