javascript - jQuery 在单击不同元素时调用相同的方法

Question

我有以下 jquery 代码，在单击 div 元素时会发生一个 Action 。 我想添加相同的点击操作 Canvas.showContentDoc(d);到 #document 中的 href元素。

如果用户点击 <i class='fa fa-angle-double-down'></i>，我希望发生相同的操作, 我怎样才能做到这一点？

for (node in obj.nodes) {
    var d = obj.nodes[node];
    var color_document = "blue"
    jQuery('<div/>', {
        id: 'document' + d.id,
        class: 'document',
        click: function (d) {
            Canvas.showContentDoc(d);
        }
    }).appendTo(title)

    $('#document' + d.id).append("<span class='fa-stack fa-1x'>  <i class='fa fa-circle fa-stack-2x' style='color:rgba(110,130,34, 1)'></i><i class='fa fa-file fa-stack-1x' style='color:" + color_document + "'></i></span> : " + d.label + " (" + d.id_doc + ")<a href='#'> <i class='fa fa-angle-double-down'></i> </a> ");                    

    Canvas.selectedNodesInfos[nodes_iteration + id_start]['label'] = d.label;

    nodes_iteration += 1;
    }

Answer 1

它就像this一样简单在 jQuery 中:

$("selector1, selector2, selector3").on("click", function(){
   Canvas.showContentDoc(d);
});

---

在 jsFiddle 上查看或者试试这个演示:

$(document).ready(function(){

$("#button_1, #span_1, #anchor_1").on("click", function(){
	sameMethod();
});

});

function sameMethod(){
	alert("same method called.");
    console.log("same method called.")
}

.clickable{
  display: block;
  padding: 5px;
}

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

<button id = "button_1" class = "clickable">
Click Me
</button>


<span id = "span_1" class = "clickable">
Click Me
</span>

<a href="#" id = "anchor_1" class = "clickable">Click Me</a>



</div>