jquery lập trình bấm vào yếu tố dom mới

Question

Tôi đang cố gắng làm điều gì đó phức tạp (ít nhất là với tôi) trong jquery. Tôi có một hộp kiểm được gắn với một hàm gọi là add_course trông giống như sau:

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

Khi ai đó đánh dấu chọn hộp kiểm, một khoảng với một số dữ liệu và liên kết sẽ được thêm vào trang. Liên kết mới được kết nối với một chức năng khác với

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

del_course thực hiện toàn bộ nội dung, giống như add_course.

Như bạn có thể thấy trong hàm add_course. Tôi kiểm tra xem hộp kiểm đã được kiểm tra và chỉ thực hiện công cụ nếu nó đã được.

đây là 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(); 
    } 

Tôi muốn có một phần khác của chức năng add_course của mình kích hoạt del_course cho liên kết tương ứng đó đã thêm vào khi hộp kiểm đã được kiểm tra. Điều này không hoạt động. Tôi có lẽ quá phức tạp một cái gì đó.

đây là html cho hộp kiểm (một ví dụ về một trong số họ):

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

đây là html cho liên kết đó được thêm vào khi ai đó nhấp vào hộp kiểm:

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

Nó hoạt động tốt khi ai đó nhấp vào liên kết, nhưng làm cách nào để kích hoạt nó theo chương trình?

Answer 1

Vì bạn có ID của phần tử mà bạn đã tạo, chỉ cần refernce ID và sử dụng trigger() phương pháp:

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

Ngoài ra, một ID mà chỉ là một số không đúng:

Mã ID và NAME phải bắt đầu bằng một chữ cái [[A-Za-z]) và có thể là , sau đó là số chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_"), dấu hai chấm s (":") và dấu chấm (".").

Answer 2

Sử dụng hàm jquery's trigger().

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

Answer 3

Về lâu dài, nó có thể giúp tổ chức lại mã của bạn một chút để bạn tách xử lý sự kiện DOM khỏi logic ứng dụng.

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