如何创建多个更改功能

-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

如何创建多个更改功能

回答

相关问题