我有一个按钮,我希望在 jquery 中克隆它,这样我就可以拥有两个按钮,使用两个按钮来完成相同的任务,但是当我运行这段代码时,只有一个按钮真正起作用,而另一个按钮不起作用。
我查过它试图使用 true 作为参数但它仍然不起作用
任何帮助将不胜感激
jQuery(function($) {
var $button = $('#addEvent'),
$row = $('.newEvent').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
jQuery(function($) {
var $button = $('#newPupil'),
$row = $('.newParticipant').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<form>
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br> First name: <input type="text" name="fisrtName"> Last Name: <input type="text" name="lastName">
</div>
<input type="button" id="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
</form>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
最佳答案
属性 id 在文档中必须是唯一的,请使用 class 代替。要附加动态创建的元素,请使用 on()
。
尝试以下方式:
jQuery(function($){
var $button1 = $('#addEvent'),
$row1 = $('.newEvent').clone();
$button1.click(function(){
$row1.clone().insertBefore($button1);
});
var $row2 = $('.newParticipant').clone();
$('body').on('click', '.newPupil', function(){
$row2.clone().insertBefore(this);
});
});
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br>
First name: <input type="text" name="fisrtName">
Last Name: <input type="text" name="lastName">
</div>
<input type="button" class="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button value="Refresh Page" onClick="refreshPage()">REFRESH</button>
<script src="newButtons.js"></script>
关于javascript - 克隆 jquery 按钮两次并让它们都在执行相同的任务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53702427/