jQuery以編程方式單擊新的dom元素

Question

我正在嘗試在jquery中（至少對我來說）很棘手。 我有一個復選框綁定到名為add_course的函數，該函數如下所示：

    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();
        }
    }

當某人選中該復選框時，帶有一些數據的跨度和鏈接將添加到頁面。 新鏈接通過以下方式連接到其他功能

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

就像add_course一樣，del_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();
    }

我想讓我的add_course函數的else部分為選中復選框時添加的相應鏈接觸發del_course。 這不起作用。 我可能已經解決了一些復雜的問題。

這是復選框的html（其中一個示例）：

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

這是當某人單擊復選框時添加的鏈接的html：

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

當有人單擊鏈接時，它的效果很好，但是我如何以編程方式觸發它？

Answer 1

由於您具有創建的元素的ID，因此只需引用ID並使用trigger()方法即可：

$('#'+id).trigger('click');

另外，一個僅是數字的ID是不正確的：

ID和NAME令牌必須以字母（[A-Za-z]）開頭，然后可以跟任意數量的字母，數字（[0-9]），連字符（“-”），下划線（“ _”） ，冒號（“：”）和句點（“。”）。

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
});