Question

您好，我正在尝试创建一个部分显示的列表，如果您单击“阅读更多”，您将能够看到所有列表。我找到了此插件：https://github.com/AdoptOpenJDK/openjdk-build/issues/851

但是，当我尝试在javascript上新插入的HTML上使用它时，它不起作用。如果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>";

Answer 1

页面加载后插入的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的上述两个示例解决方案之一。这将替换该元素的常规“ click”事件注册。除了添加为同一选择器注册的DOMNodeInsert事件之外，没有注册点击事件。

JavaScript无法在新添加的HTML上运行

1 个答案: