Question

我写了html和javascript：

＆＃13;

$(document).ready(function(e) {
  $('#btadd').click(function(e) {
    $('#content').html('<span class="btnmsg"></span>' + $('#result').html());
    $('.btnmsg')[i].click(function(e) {
      alert('span ' + i);
    });
    i++;
  });
});

var i = 0;

＆＃13;

<input type='button' value='add' id='btnadd'>
<div id='content'></div>

＆＃13;

在html代码上，我创建了一个button和一个div。点击button后，在div上会添加新的元素范围。

我希望点击span时会有一条提醒信息。我不想使用内联js（将onClick添加到span），因为我为浏览器编写了这个插件。

所以我只想在js中为span编写此事件。

我按上面的代码编写，但没有什么可看的（没有警报信息）。我该怎么办？

Answer 1

尝试事件委派：

＆＃13;

pageout

＆＃13;

531  * pageout is called by shrink_page_list() for each dirty page.
532  * Calls ->writepage().
534 static pageout_t pageout(struct page *page, struct address_space *mapping,
535                          struct scan_control *sc)
574         if (clear_page_dirty_for_io(page)) {
584                 SetPageReclaim(page);
585                 res = mapping->a_ops->writepage(page, &wbc);
597                 trace_mm_vmscan_writepage(page, trace_reclaim_flags(page));
598                 inc_zone_page_state(page, NR_VMSCAN_WRITE);

＆＃13;

Answer 2

尝试以下方法：

＆＃13;

$(document).ready(function(e) {
$('#btnadd').click(function(e) {
  var className = "btnmsg" + i;
  $('#content').append('<span class='+className+'>Test '+i+'<br/></span>');
  i++;
  var mySpan = document.getElementsByClassName(className);
  mySpan[0].addEventListener('click',(function(e) {
		var spanText = $(this).text();
		alert('You have clicked '+spanText);
	}));
 });
});

var i=0;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='add' id='btnadd'>
<div id='content'></div>

＆＃13;

Answer 3

将"btnadd"替换为"btadd"。需要更多jQuery()

$(document).ready(function(e) {
  var i = 0;
  $("#btnadd").click(function(e) {
    $('#content').html(
      $("<span>", {
        "class": "btnmsg",
        html: $("#result").html(),
        on:{"click": function(e) {
                       alert("span " + i);
                     }
           }
      })
     );
    i++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">result </div>
<input type='button' value='add' id='btnadd'>
<div id='content'></div>

Answer 4

这里的代码应该可以解决问题：

var i = 0;
$(document).ready(function(e) {
    $('#btnadd').click(function(e) {
       $('#content').html('<span id="btnmsg_' + i + '"></span>'+$('#result').html());
       $('#content').on('click', '#btnmsg_' + i, function(e) {
         alert('span '+i);
       });
     i++;
   });
});

使用ID（例如：＃btnmsg_3）意味着您可以为每个创建的对象分配唯一的事件侦听器。

然后我们使用＆＃39;＆＃39;函数在jQuery中创建动态绑定而不是依赖于DOM内容的绑定。

这有帮助吗？

为javascript代码创建的元素添加eventlistener

4 个答案: