如何創建多個更改功能

-1

我有一個html選擇和一個添加按鈕。如果任何一個點擊添加按鈕，然後一個HTML選擇創建相同的類，名稱。我的問題是，如果我改變第一個HTML選擇，然後改變功能正常工作，但如果我改變創建的HTML選擇然後改變功能不起作用。請有人指出我在這裏可能做錯了什麼？非常感謝。這裏是我的代碼：如何創建多個更改功能

<html> 
    <head> 
    <title>the title</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
$(document).on('change','.name',function(){ 
     calculateSum(); 
    }); 

    $(document).on('click','.del',function(){ 
     calculateSum(); 
    }); 
}); 


      function calculateSum() { 
      $.post(
      "data.php", 
      $(".name").serialize(), 
       function(data) { 
       $('#stage1').html(data); 
      } 
     ); 
     } 


    </script> 
<script type="text/javascript" language='javascript'> 
/* 
This script is identical to the above JavaScript function. 
*/ 
var ct = 1; 

function new_link() 
{ 
    ct++; 
    var div1 = document.createElement('div'); 
    div1.id = ct; 

    // link to delete extended form elements 
    var delLink = '<div class="del" style="text-align:right;margin-top:-20px"><a href="javascript:delIt('+ ct +')">Delete</a></div>'; 

    div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink; 

    document.getElementById('newlink').appendChild(div1); 

} 
// function to delete the newly added set of elements 
function delIt(eleId) 
{ 
    d = document; 

    var ele = d.getElementById(eleId); 

    var parentEle = d.getElementById('newlink'); 

    parentEle.removeChild(ele); 

} 
</script> 
</head> 
<body> 
    <div id="stage1" style="background-color:blue; color: white"> 
      STAGE - 1 
    </div> 

<form id="testform"> 
<div id="newlink"> 
<table> 
<tr> 
<td><p>Fruit:</p></td> 
<td> 
    <select class="name" name="name[]"> 
     <option>Apple</option> 
     <option>Mango</option> 
     <option>Orange</option> 
     <option>Banana</option> 
    </select> 
</td> 
</tr> 
</table> 
</div> 
    <input type="button" value="Add" onclick="javascript:new_link()"/> 
</form> 
    <div id="newlinktpl" style="display:none"> 
     <table> 
     <tr> 
<td><p>Fruit:</p></td> 
<td> 
    <select class="name" name="name[]"> 
     <option>Apple</option> 
     <option>Mango</option> 
     <option>Orange</option> 
     <option>Banana</option> 
    </select> 
</td> 
</tr> 
     </table> 
    </div> 
</body> 
</html>

PHP代碼：

<?php 
$fruit=$_REQUEST["name"]; 
$n = count($fruit); 


for($i=0;$i<$n; $i++) 
{ 
    echo $fruit[$i]."<br/>"; 
} 
?>

來源

2012-10-10 user1493448

我不明白。 - 爲什麼你首先將jQuery與純Javascript相混合？ - id屬性不能以數字字符開頭。 - 你不是在代碼的任何地方創建一個新的選擇 – devnull69

jQuery的FAQ文檔有你的情況一個很好的說明。

http://docs.jquery.com/Frequently_Asked_Questions#Why_doesn.27t_an_event_work_on_a_new_element_I.27ve_created.3F

你需要使用事件代表團，以便將事件綁定到該做的是代碼運行時不存在未來元素。

使用on()方法並將事件綁定到始終存在的元素或文檔本身。

$(document).on('change','.name', function(){ 

/* your code here*/ 
})

API參考：http://api.jquery.com/on/

來源

2012-10-10 11:00:06 charlietfl

你可以請，告訴我如何應用這個函數的兩個元素。請參閱我的更新代碼。只有改變功能正常工作。感謝您的回覆 – user1493448

問題不清楚 – charlietfl

周圍有此幾種方法，但因爲你是使用jQuery，最簡單的方法將使用.on('change','selector',[function]);而不是直接綁定change聽衆。最好的辦法，當然是.delegate，或-in 「純」 JS：

document.body.addEventListener('change',function(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    if (target.tagName.toLowerCase() === 'select' && target.className.match(/\bname\b/)) 
    { 
     theActualHandler.apply(target,[e]);//calls the actual handler, this will point to the changed element, and the event object is passed as an argument. 
    } 
},false);

下放事件意味着你正在聽一個事件發生，在DOM地方。發生時，您可以檢查該事件是否符合某些標準的元素：在這種情況下，它是一個select元素，其名稱爲name。從那裏結束，這只是調用實際處理程序的一個簡單問題。使用.apply可讓您將上下文設置爲已更改的元素和將事件對象傳遞給該功能。那麼這個函數的作用就像直接綁定處理程序時一樣。
現在，雖然，jQuery的.delegate呢，好看多了，同樣的事情，會更熟悉，所以我建議您使用:)

鏈接：

來源

2012-10-10 11:03:02

如何創建多個更改功能

回答

相關問題