Question

I have the following script:

$("#border-radius").click(function(){   
var value = $("#border-radius").attr("value");
    $("div.editable").click(function () { 
    mySQLinsert(value, '2', this.id)
     $(this).css({
    "-webkit-border-radius": value
    });  
});                      

});

Basically, the “#border-radius” ID is to a text input. You type in a value, click the textbox (can’t figure out a way around this) and then click the div with the class “editable” and it will apply the style “-webkit-border-radius” (I know its not cross-browser), to that DIV.

The mySQLinsert function uses Ajax to send the value of the mySQLinsert function to a mySQL database using a php page (nothing fancy).

Issue: When I click the child div (div inside of a div) it also applies this value to the parent object, and runs the mySQLinsert function and stored it in the database

I need to be able to select both the parent, and the child individually depending on which one is clicked.

Answer 1

You can use stopPropagation() to prevent the click bubbling up to its parent element.

$("#border-radius").click(function(){   
    var value = $("#border-radius").attr("value");
    $("div.editable").click(function (e) { 

       // Note the parameter e passed in the function above
       e.stopPropagation();

       mySQLinsert(value, '2', this.id)
       $(this).css({"-webkit-border-radius": value});  
    });                      
});