JQuery .On ('click') не работает

У меня есть кнопка удаления, которая создается внутри div. Когда я нажимаю, я хочу, чтобы он удалял сам и div и все внутри него.JQuery .On ('click') не работает

$('#geography-save').click(function() { 
 
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>'); 
 
}); 
 
$(document).ready(function(){ 
 
    $('.remove-save').on('click', function() { 
 
     alert('test'); 
 
     $(this).parent('div').remove(); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button> 
 

 
<div class="selected-criteria"></div>

источник

2016-12-23 Saliel Irizarry

Вам необходимо привязать к неизменному родительскому элементу, а не к самому динамическому элементу (так как он еще не существует). Вы также можете найти это объяснение полезным: http://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html – David

Просто используйте on() метод JQuery как это:

$('body').on('click', '.remove-save', function() { ... });

Вы должны связать событие с родителем, который уже существует, если содержимое генерируется динамически внутри структуры DOM!

$('#geography-save').click(function() { 
 
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>'); 
 
}); 
 
$(document).ready(function(){ 
 
    $('body').on('click', '.remove-save', function() { 
 
     alert('test'); 
 
     $(this).parent('div').remove(); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button> 
 

 
<div class="selected-criteria"></div>

источник

2016-12-23 16:56:45

Спасибо! Как только срок истечет, я отвечу на ваш ответ как ответ! –

Спасибо, рад узнать, что это помогло вам решить вашу проблему! –

Как ваш button динамически генерируется, вы можете получить доступ к нему только на основании статического элемента - так что вы можете использовать это:

$('body').on('click','.remove-save', function() {

Смотреть демо ниже:

$('#geography-save').click(function() { 
 
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>'); 
 
}); 
 
$(document).ready(function() { 
 
    $('body').on('click', '.remove-save', function() { 
 
    $(this).parent('div').remove(); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button> 
 

 
<div class="selected-criteria"></div>

источник

2016-12-23 16:58:42 kukkuz

Спасибо за помощь! –

JQuery .On ('click') не работает

ответ

Смежные вопросы