-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/>";
}
?>
4

2 に答える 2

0

jQuery FAQ docs には、状況の適切な説明があります。

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-10T11:00:06.550 に答える
0

これにはいくつかの方法がありますが、jQuery を使用しているため、リスナーを直接.on('change','selector',[function]);バインドするのではなく、使用するのが最も簡単な方法です。changeもちろん、最良のアプローチは.delegate, or -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はほとんど同じことを行い、より使い慣れているので、それを使用することをお勧めします :)

リンク:

于 2012-10-10T11:03:02.133 に答える