divからトリガーされたクリック機能

Question

div内にボタンがラップされています。 問題は、ボタンをクリックすると、ボタンの代わりにdivのクリック機能が何らかの形でトリガーされるということです。クリックイベントのために、私が持っている機能ザッツ

：

$('#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変数」でありますボタンの代わりにdivからイベントが発生するため、「Line1Software」と表示されます。

ボタンを動的に作成しているため、私のクリック機能はこのように見えます。

編集：

これは私が私のボタンを作成する方法ですと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

の内側にそれらをwrapp本当の問題はdivもbuttonどちらもidを持っているということです。

例のHTMLは、実際にイベントアップバブルになるため、各要素のために1回、2回発射すると

（彼らは.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は、実際にイベント意志バブルアップするので、各要素のために1回、2回発射すると（彼らは.Line1あるので）両方の要素にマッチして

Answer 3

あなたの場合おそらく使用する必要があるボタンにイベントリスナーを追加しようとしています$('#ButtonDiv')の代わりに

Answer 4

あなた自身が答えを与えるためにあなたの質問は少し奇妙ですにこのコードは、各.Line1要素をクリックするために、イベントが#ButtonDiv要素に委任される、ということを意味

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

（感謝：...あなたが明示的にイベント委任を使用している、あなたのコードを見てくださいバブリング）。

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

また、これは正しいです：あなたはこの動作を望まない場合は

、ちょうどそれを行う

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