從div觸發的點擊功能

Question

我有一個按鈕包裹在div中。 問題是，如果我點擊按鈕，不知何故點擊功能是從div而不是按鈕觸發的。

那是功能我有Click事件：

$('#ButtonDiv').on('click', '.Line1', function() { 
    var myVariable = this.id; 
} 

這就是我的HTML（後是動態創建的!!）：

<div id="ButtonDiv"> 
    <div class="Line1" id="Line1Software"> 
     <button class="Line1" id="Software">Test</button> 
    </div> 
</div> 

所以現在從點擊功能MYVARIABLE是' Line1Software'，因爲事件是從div而不是按鈕觸發的。

我的點擊功能似乎是這樣的，因爲我正在動態地創建按鈕。

編輯：

這是我創造我的按鈕和wrapp他們DIV

var c = $("<div class='Line1' id='Line1Software'</div>"); 
$("#ButtonDiv").append(c); 

var r = $("<button class='waves-effect waves-light btn-large btnSearch Line1' id='Software' draggable='true'>Software</button>"); 
$("#Line1Software").append(r); 

Answer 1

真正的問題是，無論是div也不button有id內。

您的代碼與示例HTML實際上每個元素觸發兩次，一次是因爲事件會冒泡，並符合這兩個元素（因爲它們是.Line1）

如果你只希望它的最裏層元素相匹配，那麼使用return false來停止冒泡。

$('#ButtonDiv').on('click', '.Line1', function() { 
 
    var myVariable = this.id; 
 
    console.log(myVariable); 
 
    
 
    return false; 
 
}); 
 

 
var c = $("<div class='Line1' id='Line1Software'></div>"); 
 
$("#ButtonDiv").append(c); 
 

 
var r = $("<button class='waves-effect waves-light btn-large btnSearch Line1' id='Software' draggable='true'>Software</button>"); 
 
$("#Line1Software").append(r);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ButtonDiv"> 
 
</div>

Answer 2

您的代碼與示例HTML實際上每個元素觸發兩次，一次是因爲事件會冒泡，並符合這兩個元素（因爲它們是.Line1）

Answer 3

如果您正試圖添加一個事件監聽器，你可能應該使用$('#Software')而不是$('#ButtonDiv')

Answer 4

你的問題有點奇怪，因爲你給自己的答案...看看你的代碼，你是明確使用事件代表團：

$('#ButtonDiv').on('click', '.Line1', function() { 
    var myVariable = this.id; 
}); 

該代碼表示​​，每個點擊.Line1元素，該事件將被委託給#ButtonDiv元素（感謝冒泡）。

如果不希望這種行爲，只要做到這一點：

$('.Line1').on('click', function() { 
    var myVariable = this.id; 
}); 

這也是正確的：

$('.Line1').click(function() { 
    var myVariable = this.id; 
});