Я хочу добавить/удалить div для каждого действия щелчка, сделанного на соответствующих кнопках добавления/удаления. но по какой-то причине, когда я нажимаю на кнопки, ничего не происходит, кроме того, что хештег добавляется в URL-адрес, и он возвращает меня в начало страницы.
Я не уверен, что происходит. Вот как выглядит мой код/надпись:
ПРИМЕЧАНИЕ = Я использую основу 5 (Не уверен, что это важно)
Javascript/JQuery:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(".add").live('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").live('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
</script>
HTML:
<div class="row">
<div class="large-2 columns">
<a href="#" class="button add">Add Line</a>
</div>
<div class="large-10 columns">
<a href="#" class="button del">Delete Line</a>
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-3 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
</div>
<div class="large-3 columns">
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
</div>
<div class="large-3 columns">
<label>Targeting Info:</label>
<input type="text" placeholder="Type Target Info here">
</div>
<div class="large-3 columns">
<label>Model:</label>
<select>
<option value="Mobile">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
<option value="OTHER">Other</option>
</select>
</div>
</div>
</div>
</div>
Вы должны ждать, пока DOM станет готовым. Использовать jQuery (document).ready
$(document).ready(function() {
$(".add").live('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").live('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
вы ставите встроенный код в тег script
который также имеет атрибут src
.
Используйте один тег, чтобы включить jQuery и один для кода yor.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
//your code here..
</script>
add
иdel
в HTML размещен?