JQuery - кнопка не будет ничего делать? - PullRequest
Новая
       22

JQuery - кнопка не будет ничего делать?

3 голосов
/ 08 июня 2011

Я разрабатываю форму поиска с кнопкой, которая добавляет до 4 выпадающих списков Штат / Город.Я пытаюсь добавить кнопку «Удалить» после каждого дополнительного набора «Штат / город», который в конечном итоге должен .remove() родительский div из DOM, но я даже не могу заставить его вызвать alert при нажатии.Есть идеи, что я делаю не так?

Вот ссылка на страницу в разработке.

Вот HTML: 

<div id="stuff">
    <div class="holder">
        <select class="state">
            <option>State</option>
        </select>
        <span class="city"></span>
    </div>
</div>

<button id="addone">ADD ONE</button>
<button id="printit">OUTPUT</button>

<div id="output"></div>

ВотJQuery: 

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

    $('#addone').click(function() {
        var $newRow = $('.holder:first').clone();
        $newRow.find('select').val('');
        $newRow.find('select.city').hide();

        // THIS IS WHERE THE Remove BUTTON IS APPENDED TO THE FORM
        $newRow.append('<input name="remove-this" type="button" class="remove-this" value="Remove" />');
        if ($('select.state').length < 4) {
            $newRow.appendTo('#stuff');
        } else {
            $newRow.appendTo('#stuff');
            $('#addone').attr('disabled','disabled');
        }
    });

    // THIS IS THE PROBLEM AREA
    $('.remove-this').click(function() {
        alert('hello');
//      $(this).parent().remove();
    });

    $('select.state').live('change',function() {
        $(this).next('span.city').find('select[id*="CITIES"]').val('').hide();
        $(this).next('span.city').find('select[id="' + $(this).val() + 'CITIES"]').show();
    });

    $('#printit').click(function() {
        var output = '';
        $('select.state').each(function() {
            output += $(this).val() + ' : ' + $(this).next('select.city').val() + '<br/>';
        });
        $('#output').html(output);
    });

    $.ajax({
        type: 'GET',
        url: 'cities.xml',
        dataType: 'xml',
        success: function(xml) {
            var select = $('select.state');
            $(xml).find('STATES').each(function() {
                $(this).find('state').each(function() {
                    var value = $(this).attr('value');
                    var label = $(this).text();
                    select.append('<option value="'+ value +'">' + label + '</option>');
                });
            });
            var select = $('span.city');
            $(xml).find('STATES').each(function() {
                $(this).find('state').each(function() {
                    var value = $(this).attr('value');
                    select.append('<select id="'+ value +'CITIES" name="'+ value +'CITIES" class="city"><option>City</option></select>');
                });
            });
            $('#stuff').find('select.city').each(function() {
                var select = $(this).attr('id');
                $(xml).find(select).each(function() {
                    $(this).find('city').each(function() {
                        var value = $(this).text();
                        var select_j = $('#'+select);
                        select_j.append('<option value="'+ value +'">' + value + '</option>');
                    });
                });
            });
        }
    });
});
//-->
</script>

Ответы [ 3 ]

3 голосов
/ 08 июня 2011

Поскольку вы добавляете .remove-this динамически, используйте функцию live для привязки события щелчка. 

$('.remove-this').live("click", function() {
   alert('hello');
   // Do Something
});
2 голосов
/ 08 июня 2011

должно быть: 

  $('.remove-this').live("click", function() {
            ....

потому что элемент добавляется в DOM, поэтому простой щелчок () не подойдет.

1 голос
/ 08 июня 2011

На первый взгляд похоже, что ваш .remove-этот элемент создается динамически. Вам нужно будет использовать либо live, либо делегат для динамического связывания функции щелчка.

...