Question

我正在尝试使用.append()添加html 里面已经添加了html，但它不会工作...... 如果html已经存在（如果我没有添加一些）那么我可以在其中添加一些，但如果我添加html并尝试在添加的html中添加一些html，那么它不会工作，而我不明白...... 希望有人可以帮我解决这个问题。谢谢。这是我的代码

<div class="add_episodes">
    <div class="season_episode">
        <input type="text">
        <input type="text">
        <input type="file" name="episode_image">
        <div class="subtitle_out"></div>
        <div class="btn-addsubtitle">add subtitle</div>
    </div>
</div>
<button id="btn-addepisode">add episode</button>

$(document).ready(function() {

  var counter = 1;

  $("#btn-addepisode").click(function(e) {
    e.preventDefault();
    $(".add_episodes").append('<div class="add_episode_out"><div class="season_episode"><input type="text" placeholder="Episode titel"><input type="text" placeholder="Indtast filnavn på episoden f.eks. orphan_black"><input class="fileextension_movie_season" type="text" placeholder=".mp4" disabled><input type="file" name="episode_image"><div class="subtitle_out"></div><div class="btn-addsubtitle">add subtitle</div><i class="fa fa-trash delete-episode"></i></div></div>');
    counter = counter + 1;
    initRemove();
  });

  var initRemove = function() {
    $(".delete-episode").click(function() {
      $(this).closest('.add_episode_out').find(".season_episode").remove();
      counter = counter - 1;
      if(counter < 1) {
        counter = 1;
      }
    });
  }

});

$(document).ready(function() {

  var counter = 1;

  $(".btn-addsubtitle").click(function(e) {
    e.preventDefault();
    $(this).closest('.season_episode').find(".subtitle_out").append('<div class="add_subtitle_out"><div class="add_subtitle"><input type="text" placeholder="Undertekstsprog"><i class="fa fa-trash delete-subtitle"></i><h5>Vælg undertekstfil (filtype .vtt)</h5><input type="file"></div></div>');
    counter = counter + 1;
    initRemove();
  });

  var initRemove = function() {
    $(".delete-subtitle").click(function() {
      $(this).closest('.add_subtitle_out').find(".add_subtitle").remove();
      counter = counter - 1;
      if(counter < 1) {
        counter = 1;
      }
    });
  }

});

Codepen example here

Answer 1

只需通过更改：

来使用委派活动

$(".btn-addsubtitle").click(function(e) {

要：

$('.add_episodes').on('click', '.btn-addsubtitle', function(e) {

这就是如何将事件处理程序附加到DOM准备好后添加到DOM的元素。

.live() | jQuery API Documentation

$（selector）.live（events，data，handler）; // jQuery 1.3+
  $（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3+
   $（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7 +

DEMO

And the code can be cleaned up a bit

Answer 2

这是因为您将click事件绑定到document.ready上的元素，但之后会创建新元素。您必须将click事件重新绑定到新创建的元素，或者更好的是，只需通过onclick从按钮调用函数。

Answer 3

我认为这是因为您的代码在文档准备就绪时运行。而是使用：

$('body').on("click", '.btn-addsubtitle', function(){
alert("hi");
});

这应该在创建元素之后运行*

无法在已添加的html中添加html，jquery append（）

3 个答案: