Question

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

Answer 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/

Answer 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几乎都是一样的，并且会更熟悉，所以我建议你使用它：）

链接：

如何创建多个更改功能

2 个答案: