Question

我在我的网站上使用PHP，jQuery，Smarty等。我有一个HTML表单。在这种形式中，有一个选择控件和几个日历控件。一些类被添加到这些控件以实现一些JavaScript功能。当表单第一次加载时，应用于这些控件的类可以工作，但是当我添加相同的控件并应用相同的类时，javascript功能不起作用。为什么会发生这种情况以及如何解决此问题？供你参考我把它放在代码的小片段之下： HTML代码：

<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="{$data.rebate_start_date}">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="{$data.rebate_expiry_date}">
<select class="states" multiple="multiple" name="applicable_states[1]" id="applicable_states_1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
</select>

PHP文件的AJAX响应如下：

$rebate_no = $_POST['rebate_no'];
 $states = '';
      foreach ($state_list as $key => $value) {
        $states .= "<option value=".$value['id'].">".$value['state_name']."</option>";
      }
<input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_start_date[$rebate_no]' id='rebate_start_date_$rebate_no' value=''>
<input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_expiry_date[$rebate_no]' id='rebate_expiry_date_$rebate_no' value=''>
<select class='states' multiple='multiple' name='applicable_states[$reabate_no]' id='applicable_states_$reabate_no'>
                    $states    
                    </select>

实际代码非常大。我只放入了代码中很小的必要部分。请你帮我这方面吗？提前致谢。 jQUery AJAX函数代码如下：

$(function() {
  $(".add_new_rebate").on("click", function(event) {
    event.preventDefault();
    var manufacturer_id =  $("#company_id").val();

    /*if($.active > 0) { //or $.active      
      request_inprogress();
    } else {*/  
      var next_rebate_no = $('.rebate_block').length + 1;
      var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>0) { 
      rebate_no = rebate_no+1;
    }

      $('.add_new_rebate').attr('disabled','disabled');
    //}

    $.ajax({
      type: "POST",
      url: "add_rebate_by_product.php",
      data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.table-responsive').after("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      success: function(data) {
        if(jQuery.trim(data)=="session_time_out") {
        window.location.href = site_url+'admin/login.php?timeout=1';                
        } else {
          $('.rebate_block').append(data);
          $('.add_new_rebate').removeAttr('disabled');
        }
        $('.load').remove();
      }
    });    
 });   
});

Answer 1

因为jQuery只解析加载的DOM，所以它不适用于jQuery处理后添加到DOM的东西。查看jQuery API中的“on”函数

Answer 2

你必须添加.on 如果jquery＆gt; 1.7

$('#parent-selector').on('click', 'child-selector', funcion(){})

子选择器是刚刚添加的选择器。您需要在此样式中为在页面上动态添加的新元素添加add事件直到jquery 1.7你可以.live('click')

Answer 3

就像其他人提到的那样，当你在现有元素上有jquery处理程序时，它们工作正常，但新元素没有绑定到那些处理程序，这就是我们需要使用 .on() 方法。

因此，对于新创建的元素，我们将附加一个click事件处理程序或任何事件，如下所示：

.states：

$(document).on('change','.states',function(){ //on change of select });

.date_control：

$(document).on('click','.date_control',function(){ //on click of input .date_control });

<强> DEMO

Answer 4

我也有这个问题，但我找到了答案。

就像我可以拥有的Kittenz所说的那样。你.on（）函数会做的伎俩。

在jQuery网站here

上

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时页面上。要确保元素存在且可以选择，请在文档就绪处理程序中为HTML中的元素执行事件绑定页面上的标记。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

这意味着如果你调用ajax代码（代码加载时没有的事件处理程序），你需要将它绑定到那里的元素。

以下是一个例子：

$( "body" ).on( "click", "p", function() {
    alert( $( this ).text() );
});

你也可以在上面的链接上看到。它显示了它的工作原理。

为什么jQuery类不适用于从AJAX响应生成的HTML元素？

4 个答案: