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

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

我想让 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()< /code>方法：

$('#'+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
});