jQuery調用不同的元素點擊相同的方法

我有以下的jquery代碼，它在點擊div元素時，發生一個動作。我想添加相同的點擊動作Canvas.showContentDoc(d);到#document元素中的href。jQuery調用不同的元素點擊相同的方法

我想要發生同樣的動作，如果用戶點擊，我該如何做到這一點？

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; 
    }

來源

2017-04-19 passion

，你能否告訴我們HTML輸出？ – dsharew

這很簡單，只要this jQuery中：

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

檢查jsFiddle或試試這個演示：

$(document).ready(function(){ 
 

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

 
}); 
 

 
function sameMethod(){ 
 
\t 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>

來源

2017-04-19 13:02:43 dsharew

您可以使用.querySelector()添加事件偵聽器，像這樣：

document.querySelector('li.fa.fa-angle-double-down').addEventListener('click', function() { 
    Canvas.showContentDoc(d); 
});

這裏是一個非常簡單的例子：

document.querySelector('li.fa.fa-angle-double-down').addEventListener('click', function() { 
 
    alert('Clicked!'); 
 
});

<li class="fa fa-angle-double-down">List item</li>

來源

2017-04-19 12:59:34 freginold

如何將其整合到我的代碼中？你能幫忙嗎？ – passion

@passion當然，只需將我的答案頂部的代碼（使用您的'Canvas.showContentDoc（d）;'函數調用）複製並放到JavaScript文件的底部即可。你很好走。 – freginold

你可以用你的 in <a>

例子：<a href="#" onclick="Canvas.showContentDoc(d);"> </a>

雖然我相信JS去所有的方式是更好地看到@dsharew回答

來源

2017-04-19 13:00:34

jQuery調用不同的元素點擊相同的方法

回答

相關問題