jquery在after（）事件中的目標div

我有一個非常小的問題。我有一個輸入字段，有一個按鈕可以在點擊時創建它的一個實例。一切正常，當點擊事件啓動時，但問題出現時，我的目標是與after()生成的元素，我似乎無法做到這一點。請看下面的代碼jquery在after（）事件中的目標div

HTML

<div class="after-add-more form-group"> 
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here"> 
</div> 

    <!-- Copy Fields --> 
<div class="copy hide"> 
    <div class="form-group more-duty"> 
     <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here"> 
     <button class="remove" type="button">Remove Stuff</button> 
    </div> 
</div> 

<button class="add-more" type="button">Add Stuff</button>

的Javascript

$(".add-more").click(function(){ 
    var html = $(".copy").html(); 
    $(".after-add-more").after(html); 
}); 

$("body").on("click",".remove",function(){ 
    $(this).parents(".more-duty").remove(); 
}); 

$('.try').click(function() { 
    alert("Ouch"); 
});

當我點擊產生的輸入端，以便我可以呼應哎喲，該事件不是called.please看到this fiddle。任何幫助將不勝感激。謝謝。

來源

2017-02-16 bobin56

所以問題是，你希望新的輸入和按鈕被放置在列表中的最後一個，是嗎？ –

你需要的事件代表團，同你這樣做是爲了.remove類點擊喜歡，

$("body").on("click", ".remove", function() { 
    $(this).parents(".more-duty").remove(); 
}).on('click', '.try', function() { 
    alert("Ouch"); 
});

$(".add-more").click(function() { 
 
    var html = $(".copy").html(); 
 
    $(".after-add-more").after(html); 
 
}); 
 

 
$("body").on("click", ".remove", function() { 
 
    $(this).parents(".more-duty").remove(); 
 
}).on('click', '.try', function() { 
 
    alert("Ouch"); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="after-add-more form-group"> 
 
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here"> 
 
</div> 
 

 
<!-- Copy Fields --> 
 
<div class="copy hide"> 
 
    <div class="form-group more-duty"> 
 
    <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here"> 
 
    <button class="remove" type="button">Remove Stuff</button> 
 
    </div> 
 
</div> 
 

 
<button class="add-more" type="button">Add Stuff</button>

來源

2017-02-16 11:01:53

沒關係，作品。謝謝：-） – bobin56

$(".add-more").click(function() { 
 
    var html = $(".copy").html(); 
 
    $(".after-add-more").after(html); 
 
}); 
 

 
$("body").on("click", ".remove", function() { 
 
    $(this).parents(".more-duty").remove(); 
 
}); 
 
$(document).on("click",'.try',function() {//use .on() 
 
    alert("Ouch"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="after-add-more form-group"> 
 
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here"> 
 
</div> 
 

 
<!-- Copy Fields --> 
 
<div class="copy hide"> 
 
    <div class="form-group more-duty"> 
 
    <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here"> 
 
    <button class="remove" type="button">Remove Stuff</button> 
 
    </div> 
 
</div> 
 

 
<button class="add-more" type="button">Add Stuff</button> Javascript

它是動態補充所以使用.on()

來源

2017-02-16 11:05:25 guradio

$（「身體」）。在（「點擊」，「嘗試」，函數（）{

 alert(" Ouch ");

}）;

/**這將工作。在你的情況下，它不工作，因爲單擊事件沒有綁定元素，因爲它是後生成*/

來源

2017-02-16 11:10:35

jquery在after（）事件中的目標div

回答

相關問題