Question

    $(document).ready(function () {
        $("[data-role=content]").not("#ft").children().live({ 
        mouseover: function () { $(this).css({ border: "1px solid gray" }); }, 
        mouseleave: function () { $(this).css({ border: "0" }); } });
    });

This is not working. The border not shown.Can anybody tell me where i am wrong?

Answer 1

From the .live documentation:

Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.

Therefore $(...)....children().live() won’t work.

Use .on instead:

$("[data-role=content]").not("#ft").on( {
    mouseover: function () { 
        $(this).css({ border: "1px solid gray" }); 
    }, 
    mouseleave: function () { 
        $(this).css({ border: "0" }); 
    }
}, '[data-role=content] > *');

Unfortunately it does not seem to be possible to just use > * as selector for the event delegation. Of course [data-role=content] > * only works properly if the [data-role=content] elements are not nested.

DEMO