jquery click() 事件不适用于附加的 html 标签 [英] jquery click() event won't work for appended html tags

问题描述

在我的问题有意义之前，我需要解释几件事.在我的第一页上，我有一个主 div，我正在使用 jquery load() 方法从另一个页面加载标记.我正在加载的 html 链接到我的脚本所在的 .js 页面.js 页面是我操作主 div 内容的地方.在我的 js 页面上，我遍历从数据库中提取的变量数组并将它们 append() 到主 div.在 for 循环中，我将每一行包装在自己的 div 中并包含一个锚标记.锚标记是我想要附加 click() 方法的东西，这样我就可以在点击后调用一个函数.我试过 parent > child 选择器等，但对锚标记没有任何作用.我的代码:

//这是对我的解析数据库的查询查询.find({成功:功能(结果){for (i = 0; i < results.length; i++){活动 = 结果[i].get("活动");Scene = results[i].get("location");邻里 = 结果[i].get("邻里");date = results[i].get("date");details = results[i].get("details");time = results[i].get("time");search.push([活动、场景、街区、日期、细节、时间]);for (i = 0; i < search.length; i++) {//将每一行结果附加到他们自己的 div 内的 mainDiv 中，每行末尾都有一个锚标记.//当锚标记被点击时，我想调用一个函数，但我尝试过的选择器都没有工作.$('#mainDiv').append("
" + search[i].join(' ') + "有兴趣吗?</a></div>");}};//关闭for循环},//关闭成功函数错误:函数(错误){alert("错误:" + error.code + " " + error.message);}});//关闭查找

解决方案

我在这里找到了答案:新添加的 div 不会在文档就绪时继承事件处理程序

快捷事件处理程序(例如 click()、mouseover() 等)仅适用于页面加载时可用于 DOM 的元素.动态添加元素时，您必须将事件附加到静态父元素，并提供您希望将事件委托给的过滤器，如下所示:

这是我的解决方案:

$("#mainDiv").on('click', '.interested', function(){警报(工作")；});

There are a couple of things I need to explain before my question makes sense. On my first page I have a main div where I'm loading markup from another page using the jquery load() method. The html I'm loading is linked to a .js page where my script is. The js page is where I'm manipulating the content of the main div. On my js page I loop through an array of variables I pull from a database and append() them to the main div. In the for loop I wrap each row in its own div and include an anchor tag. The anchor tag is what I want to attach the click() method to so I can call a function once it is clicked. I've tried the parent > child selector among others, but nothing works for the anchor tag. My code:

//this is the query to my parse database

query.find({
  success: function(results) {
    for (i = 0; i < results.length; i++){

        activity = results[i].get("activity");
        scene = results[i].get("location");
        neighborhood = results[i].get("neighborhood");
        date = results[i].get("date");
        details = results[i].get("details");
        time = results[i].get("time");
        search.push([activity, scene, neighborhood, date, details, time]);

        for (i = 0; i < search.length; i++) {

            //append each row of results to mainDiv inside of their own div with an anchor tag at the end of each row.
            //when the anchor tag is clicked I want to call a function, but none of the selectors I've tried have worked. 

            $('#mainDiv').append("<div id='event'>" + search[i].join(' ') + "<a href='#' id='interested'>Interested?</a></div>");
        }

    };// closes for loop
    },//closes success function
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
}); //closes find

解决方案

I found an answer here: Newly appended div doesn't inherit event handler in document ready

The shortcut event handlers (such as click(), mouseover() etc) will only apply to elements which are available to the DOM on page load. When appending elements dynamically you have to attach the event to a static parent element, and supply a filter which you wish to delegate events to, like this:

This was my solution:

$("#mainDiv").on('click', '.interested', function(){
       alert("working");
   });

这篇关于jquery click() 事件不适用于附加的 html 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！