элемент добавления не вызывает событие - PullRequest
Новая
       8

элемент добавления не вызывает событие

0 голосов
/ 08 марта 2012

Я хотел бы добавить новое поле ввода и ссылку «удалить» после нажатия «Еще».Также поле ввода можно удалить, нажав «удалить».

Однако поле ввода не удаляется после нажатия ссылки «Удалить».

Кто-нибудь может помочь им?Большое спасибо! 

    <script type="text/javascript">
        $(document).ready(function(){

           $('#link').click(function(){
               $('#newField').append('<input type="textbox"><a href="#" id="removeField">Remove</a><br/>');
               });
               $('#removeField').click(function(){
               $("#newField").remove();
           });
        });
    </script>

    <a href="#" id="link" title="Add field by clicking">More</a>
    <div id="newField">

    </div>

Ответы [ 3 ]

1 голос
/ 08 марта 2012

Элемент 'removeField' недоступен в DOM при попытке связать событие click.попробуйте связать событие, используя 'on' http://api.jquery.com/on/ или http://api.jquery.com/live/

0 голосов
/ 08 марта 2012

когда вы добавляете поле, вы не добавляете к нему идентификатор, поэтому вы не можете удалить его. Попробуйте это: 

$('#newField').append('<input type="textbox" id="monNewField"><a href="#" id="removeField">Remove</a><br/>');

Но я бы на вашем месте сделал что-то подобное, чтобы вы могли добавлять и удалять столько полей, сколько хотите: 

$('#newField').append('<div class="row"><input type="textbox"><a href="#" class="removeField">Remove</a></div>');

тогда: 

$('.removeField').click(function(){
  $(this).parent().remove();
});
0 голосов
/ 08 марта 2012

Я думаю, что это достигнет того, что вы хотели сделать: 

<a href="#" id="link" title="Add field by clicking">More</a>
<div id="newField"></div>​

<script type="text/javascript">
$('#link').on('click',function() {
    $('#newField').append('<input type="textbox"><a href="#" class="removeField">Remove</a><br/>');
});
$('#newField').on('click','.removeField',function() {
    $this = $(this);
    $this.prev().remove();
    $this.next().remove();
    $this.remove();
});​
</script>

Вы действительно должны использовать для этого функцию .on() в jQuery.

...