Question

我正在开发一个带有按钮的搜索表单，该按钮最多可为表单添加4个州/城市下拉列表。我试图在每个额外的州/城市集之后添加一个删除按钮，最终应该.remove()来自DOM的父div，但我甚至无法在单击时触发alert。我有什么想法吗？

Here's a link to the page in development.

这是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函数绑定click事件。

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

Answer 2

它应该是：

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

因为元素被添加到DOM中，所以简单的click（）就不会这样做。

Answer 3

乍一看，它看起来像你的.remove-这个元素是动态创建的。您需要使用live或delegate动态绑定click函数。

jQuery - Button不会做任何事情？

3 个答案: