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

问题描述：

我正在开发一个带有按钮的搜索表单，该表单中最多可以添加4个州/城市下拉菜单。我试图添加一个删除按钮，每个额外的州/城市设置，最终应该从DOM的父母div，但我甚至不能触发alert单击时触发.remove()。任何想法我做错了什么？jQuery - 按钮不会做任何事情？

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>

答

由于您正在动态添加.remove，请使用live函数来绑定click事件。

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

啊！奇怪的是，我曾尝试过，但没有奏效。我一定是第一次做错了。谢谢！ :) – Tom 2011-06-07 23:02:28

答

它应该是：

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

，因为该元素被添加到DOM，所以简单的点击（）不会。

感谢您的信息:)，你可以请告诉为什么**。bind **不起作用？ – Jith 2011-06-07 23:31:23

绑定将绑定事件处理程序绑定到绑定时的元素。由于.remove-这个元素在绑定时不存在，他们确实得到绑定到它们的处理函数。 – joekarl 2011-06-08 00:24:36

答

乍一看，它看起来像你的.remove-这个元素是动态创建的。您需要使用live或委托来动态绑定点击功能。

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

相关推荐