jQuery - 按钮不会做任何事情？

Question

我正在开发一个带有按钮的搜索表单，该按钮最多可在表单中添加 4 个州/城市下拉列表。我试图在每个附加的州/城市集之后添加一个“删除”按钮，最终应该从 DOM 中 .remove() 父 div，但我什至无法让它触发 点击时发出警报。有什么想法我做错了吗？

这是正在开发的页面的链接。

这是 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>

Answer 1

由于您要动态添加 .remove-this，因此请使用 live 函数绑定点击事件。

$('.remove-this').live("click", function() {
   alert('hello');
   // Do Something
});

Answer 2

应该是：

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

因为元素被添加到 DOM 中，所以简单的 click() 是不行的。

Answer 3

乍一看，您的 .remove-this 元素似乎是动态创建的。您需要使用 live 或 delegate 来动态绑定点击函数。

Answer 4

jQuery .live() 已在 1.9 版本中删除，因此请使用

$("#stuff").on('click', '.remove-this', function(e){
 //your code here
});

#happyCoding