jqueryはプログラムによって新しいDOM要素をクリックします

Question

jqueryで（少なくとも私にとっては）何か難しいことをしようとしています。

function add_course(){ 
     var id = $(this).attr('id'); 
     if ($(this).is(':checked')){ 

      if($('#courseInput').val().search(id) < 0){ 
       $('#CourseSummary').append('<span id="cn'+id+'"><a href="#" class="courseDel" id="'+id+'">X</a> '+$('#course'+id+' a').html()+'<br/></span>'); 
       $('#courseInput').val(function(index,value){ 
        return value+ id +',1;'; 
       }); 
       addTotal($('#price'+id).text()); 
      } 
      imageSync(); 
     }else{ 
      //This is where my question refers to. 
      $('a#'+id+'.courseDel').click(); 
     } 
    } 

誰かがチェックボックスをチェックし、いくつかのデータとリンクとのスパンがページに追加されます。私はこのようになります機能と呼ばれるadd_courseにバインドされているチェックボックスを持っています。新しいリンクは

$('.courseDel').live('click', del_course); 

del_courseはちょうどadd_courseのように、ものの全体の束を行うと異なる機能に接続されています。

add_course関数で確認できます。チェックボックスがオンになっているかどうかをチェックし、チェックボックスがオンになっている場合にのみチェックします。ここ

はdel_courseです：

 function del_course(){ 
     var id = $(this).attr('id'); 
     $('#cn'+id).remove(); 
     $('#courseInput').val(function(index,value){ 
      return value.replace(id+',1;',""); 
     }); 
     subtractTotal($('#price'+id).text()); 
     imageSync(); 
    } 

私はチェックボックスがチェックされたときに追加しまった、対応するリンクのdel_courseをトリガ私のadd_course機能の他の部分を持っていると思います。これは動作していません。私はおそらく複雑なものを超えてきました。ここ

は、チェックボックス（そのうちの一つの例）のためのhtmlです：

<span id="cn204"><a href="#" class="courseDel" id="204">X</a> Course Title<br/></span> 

：ここ

<input type="checkbox" class="courseAdd" name="courseAdd" id="204"/> 

は、誰かがチェックボックスをクリックしたときに追加されるリンクのhtmlです誰かがリンクをクリックするとうまくいくが、どうやってそれをプログラムで起動するのだろうか？

Answer 1

あなたが作成した要素のIDを持っているので、単純にIDをrefernceとtrigger()メソッドを使用します。

​​

また、ちょうど数であるIDが正しくありません。

IDとNAMEトークンは、文字（[A-Za-z]）で始まる必要があります。 に続けて任意の文字数、数字（[0-9]）、ハイフン（ " - "）、 アンダースコア（ "_"）、コロンs（ "："）、およびピリオド（ "。"）が含まれます。

Answer 2

jqueryのtrigger()関数を使用します。

$('.courseDel').trigger('click'); 

Answer 3

長期的には、アプリケーションロジックからDOMイベント処理を切り離すためにコードを少し再編成すると役立ちます。

ここで注意すべき項目

//Functions to add and remove stuff (these are *not* event handlers) 
//Since they now receive explicit parameters 
// you have full power over when to add and remove stuff and functions 
// can very easily call eachother if needed. 

//You can have any kind of state you might need, without having to 
//trick the dom into storing it for you: 
var currentlySelectedCourse = null; 

function add_course(id){ 
    //its now easy to access global state like the 
    //currently open course 
    //and it is now easy to call other functions like del_course 
} 

function del_course(id){ 
} 

//event handling can now become just a simple layer... 

$('.courseDel').live('click', function(){ 
    var id = //get the id or what parameters you need 
    del_course(id); //pass it to the backend function 
});