Ben Ben - 11 months ago 80
Javascript Question

Return a specific DOM element from 'click' event handler

I have the following function:

function viewdwable(dwableid) {
$("#modal-body2").html('Temporary loading message..');
url: 'scripts/viewdwablehome.php',
data: { "currentNumber": dwableid, "usersid": usersid },
type: 'post',
dataType: "json",
success: function(data) {

This activates when clicked:

<div class="postfeed2" onclick="javascript:return viewdwable(' . $id . ');">
<a href="javascript:void(0)" onclick="javascript:return like(' . strip_tags($id) . ');">Text linked here</a>

The problem is I have another onclick link within the div. When that onclick is clicked I don't want it to also fire the div onclick.

Answer Source

Fire your function inside a proper event handler, so you can use event.stopPropagation() for the inner element. This will prevent the event from bubbling up the DOM.

$('.postfeed2').on('click', function(){
    alert('clicked outer');

$('a').on('click', function(e){
    alert('clicked inner');