Question

I have the following javascript, I don’t want this mousedown function to fire if the user is clicking on a delete div inside the .field_trip_mini_div. The delete div id is ‘delete’. What code should I add so the mouse down function does not procede if the user clicked on the delete div? I tried changing the first line to

$(".field_trip_mini_div :not('#delete')").live({  

But that didn’t work. Is there a way I could stop it on the second line of code?

$(".field_trip_mini_div").live({  
    mousedown: function(){     
    $.ajax({
        type: "POST",
        url: "/field_trips/"+selected_field_trip_id+"/reload_div",
        data: {id: selected_field_trip_id},
        success: function(response)
           {
            $('#selected_fieldTrip_div').html(response);
           }
        });
});

Edit: I used # originally, thank you for the answers but it was a Stack Overflow input error.

Answer 1

Is delete an element inside field_trip_mini_div? If so you can check the id of the target of the clicked element using e.target:

$(".field_trip_mini_div").live({  
    mousedown: function(e){    
      if ($(e.target).attr("id")!= "delete") // This line right here
      {
        $.ajax({
            type: "POST",
            url: "/field_trips/"+selected_field_trip_id+"/reload_div",
            data: {id: selected_field_trip_id},
            success: function(response)
               {
                $('#selected_fieldTrip_div').html(response);
               }
            });
      }
  });

Some info on events and the event object: http://www.w3schools.com/jsref/dom_obj_event.asp