如何创建多重变化功能答案

【问题标题】：How to create multiple change function如何创建多重变化功能
【发布时间】：2012-10-11 15:46:30
【问题描述】：

我有一个 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/>";
}
?>

【问题讨论】：

我不明白。 - 你为什么首先将 jQuery 与纯 Javascript 混合在一起？ - id 属性不能以数字字符开头。 - 您没有在代码中的任何位置创建新选择

标签： javascript jquery jquery-selectors

【解决方案1】：

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/

【讨论】：

请告诉我如何将此功能应用于两个元素。请看我的更新代码。只有更改功能才能正常工作。感谢您的回复

【解决方案2】：

有几种方法可以解决这个问题，但由于您使用的是 jQuery，最简单的方法是使用 .on('change','selector',[function]); 而不是直接绑定 change 监听器。最好的方法当然是.delegate，或者 -in "pure" 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 几乎可以做同样的事情，而且会更熟悉，所以我建议你使用它:)

链接：

【讨论】：