如何查找多個.change（）事件到正在使用AJAX處理的項目

第一個問題在這裏，所以我會盡我所能按照所有規則。如何查找多個.change（）事件到正在使用AJAX處理的項目

我有一個PHP頁面有2個選擇組，第二組默認是禁用的。

先選擇組被稱爲「yearlist」，第二選擇組被稱爲「makelist」

當用戶改變在yearlist一個選擇時，第二箱（makelist）填充在與從數據庫表中選擇（通過我的script.js中的ajax請求）並不再被禁用。

當我在第二選擇組makelist中進行選擇時出現問題。我希望jQuery在發現用戶在該makelist組中發生的更改時發出一個簡單的警報（「hello」），但它不起作用，我不知道爲什麼。

主文件：

<?php 

    $con = mysqli_connect("localhost","xxxx","xxxx","xxxx"); 

    $query="SELECT * FROM carstats GROUP BY year ORDER BY year DESC"; 

    $result = mysqli_query($con, $query); 

?> 
<script type="text/javascript" src="js/script.js"></script> 

<select id="yearlist" name="yearlist"> 
    <option>SELECT YEAR</option> 
     <?php 
      while ($row=mysqli_fetch_array($result)){ 
       echo "<option>" . $row['year']. "</option>"; 
      } 
     ?> 
</select> 

<!--this will be populated/replaced via ajax--> 
<div class="makeResult"> 
    <select id="makelist" name="makelist" disabled="disabled"> 
     <option>SELECT MAKE</option> 
    </select> 
</div>

jQuery的（的script.js）：

$(document).ready(function() { 
    $('#yearlist').change(function() { 

     //save the selection as a variable 
     var selectedYear = $(this).val(); 

     $.get("change_query.php?selectedYear="+selectedYear, function(data){ 
      $('div.makeResult').html(data); 
     });//end get function 
    });//end yearlist change function 

    $('#makelist').change(function() { 

     //eventually want to do more but for now just alert that it's working 
     alert("makelist has been changed"); 

    });//end makelist change function 

});//end ready function

最後，change_query.php文件：

<?php 
    $con = mysqli_connect("localhost","xxxx","xxxx","xxxx"); 

    $year = $_GET["selectedYear"];//this is grabbed from the JS script 

    $query="SELECT * FROM carstats WHERE year='".$year."' GROUP BY make ORDER BY make"; 

    $result = mysqli_query($con, $query); 

?> 

<select id="makelist" name="makelist"> 
    <option>SELECT MAKE</option> 
    <?php 
      while ($row=mysqli_fetch_array($result)){ 
       echo "<option>" . $row['make']. "</option>"; 
      } 
     ?> 
</select>

來源

2014-05-07 Keith Robertson

當你使用：

$('div.makeResult').html(data);

要刪除的#makelist元素，這是連接，讓您擁有一個新的#makelist元素的更改事件，但沒有改變的事件。在$ .get回調函數中放置$（'＃makelist'）。change（）函數。

$.get("change_query.php?selectedYear="+selectedYear, function(data){ 
    $('div.makeResult').html(data); 
    $('#makelist').change(function() { 

      //eventually want to do more but for now just alert that it's working 
      alert("makelist has been changed"); 

    });//end makelist change function 
});//end get function

只是爲了澄清，當你連接像$事件（「＃makelist」）。改變（...），您準備附加該事件的元素，而不是ID。如果替換元素，事件就會消失，即使元素與舊元素具有相同的ID。

來源

2014-05-08 00:09:01

解決了它，謝謝。正如你澄清的，我沒有意識到.change（）事件綁定到元素而不是ID。再次感謝。 –

正如James L所說的那樣，#makelist DOM節點在覆蓋它時會被破壞，所以不再附加事件處理程序。

而不是

$('#makelist').change(function() {})

你可以使用

$(document).on('change', '#makelist', function() {})

這將事件處理程序附加到文檔，它總是會被調用。

來源

2014-05-08 00:24:23 JeffS

Upvoted，因爲我不知道這件事。我想他也可以將它附加到makeResult然後：$（'＃makeResult'）。on（'change，'#makelist'，...） –

如何查找多個.change（）事件到正在使用AJAX處理的項目

回答

相關問題