獲取具有的onclick

Question

我有很多的div喜歡這個div：

<div id="one" onclick="test('important data one')">ONE</div> 
<div id="two" onclick="test('important data two')">TWO</div> 

，我有一個jQuery函數是這樣的：

function test(data){ 
    //do important stuff with data 
} 

而在這功能我需要得到的標識div被點擊。 $（this）不起作用。我可以通過它作爲一個變量，但我不想改變的HTML（很多）。可以在不改變html的情況下在函數中訪問div？

Answer 1

編輯對Firefox的支持：

<div id="one" onclick="test('important data one',this)">ONE</div> 

只需將此作爲參數發送。

function test(data,el) { 
    //do important stuff with data 
    alert(el.id); 
} 

http://jsfiddle.net/kJFhP/3/

Answer 2

爲什麼不改變你的函數來通過this作爲參數？

<div id="one" onclick="test('important data one', this)">ONE</div> 
<div id="two" onclick="test('important data two', this)">TWO</div> 

，然後用它在你的函數：

function test(data, clickedElement){ 
    //do important stuff with data and the clicked element 
} 

Answer 3

您需要設置click處理程序使用jQuery，使您預期的那樣工作：

$('#one').click(function() { 
    // here you can use $(this) 
}) 

Answer 4

您既可以添加事件參數來獲取活動對象：

事件

function test(data, e) { 
    // do important stuff with data 
    var evt=e||window.event; 
    var el=evt.target||evt.srcElement; 
    var id=el.id; // id of the clicked div 
} 

這將需要這些調用：

<div id="one" onclick="test('important data one', event)">ONE</div> 
<div id="two" onclick="test('important data two', event)">TWO</div> 

或者，如果你認爲你將不再需要任何比這個特定元素一樣，你可以直接將它傳遞這樣的：

元

function test(data, element) { 
    // do important stuff with data 
    var id=element.id; 
} 

這將需要這些調用：

<div id="one" onclick="test('important data one', this)">ONE</div> 
<div id="two" onclick="test('important data two', this)">TWO</div> 

---

不同的是，在第一種情況下，你可以最終得到m瞭解剛剛處理的事件的相關信息。在第二種情況下，您只能獲取有關觸發事件的元素的信息（如果您認爲不需要關於事件的更多信息，則效率更高）。

Answer 5

我會在JavaScript中設置您的點擊處理程序，而不是在html中。最好的做法是保持一切分開，並使事情維護起來更容易。你的情況會是這個樣子，如果我不得不寫它：

HTML

<div id="one" class='test' data-test='important data one'>ONE</div> 
<div id="two" class='test' data-test='important data two'>TWO</div> 

jQuery的

// your function 
    function test($div){ 
     alert('my id is [' + $div.attr('id') + '] and my data is [' + $div.attr('data') . ']'); 
    } 

    // when the dom is ready 
    $(document).ready(function() { 
     // set the click handlers 
     $('.test').click(function() { 
      // call your function, with the trigger (as a jQuery object) as parameter   
      test($(this)); 
     }); 
    }); 

我已經建立了一個簡單的例子：： http://jsfiddle.net/9fwjQ/

我認爲這應該解釋自己，但隨時問問你是否需要任何進一步的幫助。