2013-07-01 81 views
0

這似乎是在這裏與我以前question但我的目的是:jQuery的:函數以捕獲實際點擊的元素

目的:排查和檢測被點擊的實際DOM元素。

這是訪問被點擊元素的id/class的最簡單方法。

$("span").on('click', function(event) { 
    event.stopPropagation(); 
    alert("The span element was clicked. ID:" + $(this).attr("id") + " ; Class=" + $(this).attr("class")); 
    }); 

    $("p").on('click', function(event) { 
    event.stopPropagation(); 
    alert("The p element was clicked. ID:" + $(this).attr("id") + " ; Class=" + $(this).attr("class")); 
    }); 

    $("div").on('click', function(event) { 
    event.stopPropagation(); 
    alert("The div element was clicked. ID:" + $(this).attr("id") + " ; Class=" + $(this).attr("class")); 
    }); 

    $("tr").on('click', function(event) { 
    event.stopPropagation(); 
    alert("The tr element was clicked. ID:" + $(this).attr("id") + " ; Class=" + $(this).attr("class")); 
    }); 

$("a").on('click', function(event) { 
    event.stopPropagation(); 
    alert("The a element was clicked. ID:" + $(this).attr("id") + " ; Class=" + $(this).attr("class")); 
    }); 

希望有人能提高我在一個單一的功能什麼的代碼。

儘管我可以看到元素是如何在Chrome和ffox上構建的,但我仍然想知道爲什麼我無法捕獲具有指定標識的元素標記上的事件。

$('a[id^="preview"]').on('click',function(e) { 
    alert($(this).attr("id")); 

}); 

附加信息:我整個包住表DIV和所有A與跨度

題記來解決:點擊那麼,什麼如果我的Click事件處理程序沒有工作?使用`變量$(可能是別的東西......)

回答

1

您可以在一個呼叫堅持這個..

$("span, a, p, div, tr").on('click', function(event) { 
     event.stopPropagation(); 
     var $this = $(this); 
     alert("The " + $this.prop("tagName") + " element was clicked. ID:" + 
       $this.prop("id") + " ; Class=" + $this.prop("class")); 
     }); 
+1

另外,您可以緩存jQuery對象,而不是反覆用$調用它(這) this = $(event.target);'或'var $ this = $(this);' – HMR

+0

在jQuery中,event.target始終包含作爲事件源的DOM元素。這是我認爲最簡單的方式。 – Ricola3D

+0

更新了答案以反映對象緩存。 –