jquery programmatically haga clic en el nuevo elemento dom

Question

Estoy tratando de hacer algo complicado (al menos para mí) en jquery. Tengo una casilla de verificación que está enlazado a una función llamada add_course que se parece a esto:

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

Cuando alguien comprueba la casilla de verificación, un lapso con algunos datos y un enlace se añaden a la página. El nuevo enlace se conecta a una función diferente con

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

del_course hace un montón de cosas, al igual que add_course.

Como puede ver en la función add_course. Compruebo si la casilla de verificación ha sido revisada y solo hago las cosas si ha sido así.

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

me gustaría tener la parte de mi otra función add_course desencadenar la del_course para el enlace correspondiente que quedó añadió cuando se marca la casilla. Esto no está funcionando. Probablemente he complicado algo.

aquí es el código HTML de la casilla de verificación (un ejemplo de uno de ellos):

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

aquí es el código HTML para el enlace que se agrega cuando alguien hace clic una casilla de verificación:

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

Funciona muy bien cuando alguien hace clic en el enlace, pero ¿cómo lo disparo de manera programática?

Answer 1

Puesto que usted tiene el ID del elemento que ha creado, simplemente refernce el ID y utilizar el trigger() método:

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

Además, un ID que es sólo un número es incorrecto:

ID y NAME tokens debe comenzar con una letra ([a-Za-z]) y puede ser seguido de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_"), dos puntos s (":") y puntos (".").

Answer 2

Utilice la función de jquery trigger().

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

Answer 3

A largo plazo, podría ayudar a reorganizar un poco su código para que desacople el manejo de eventos DOM de la lógica de la aplicación.

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