Sử dụng jquery bấm vào để xử lý neo onClick()

Question

Tôi có một bộ các thẻ neo tạo động trong một vòng lặp for như sau:

<div id = "solTitle"> <a href = "#" id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>'; 

Khi mã này được thực hiện đầu ra html với một trong các trường hợp sẽ trông như:

<div id = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> 

<div id = "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> 

Bây giờ tôi muốn các văn bản khác nhau được hiển thị khi nhấp vào các liên kết ở trên. openSolution() trông như thế này:

function openSolution() { 
    alert('here'); 
    $('#solTitle a').click(function(evt) { 
     evt.preventDefault(); 
     alert('here in'); 
     var divId = 'summary' + $(this).attr('id'); 

     document.getElementById(divId).className = ''; 

    }); 
} 

Khi tôi thực hiện nó và nhấp chuột vào một trong các liên kết, dòng chảy doesnot đến bên trong handler jquery nhấp chuột. Tôi đã kiểm tra nó bằng các cảnh báo trên được sử dụng. Nó chỉ hiển thị cảnh báo - 'ở đây' chứ không phải cảnh báo - 'ở đây trong'. Khi nhấp vào liên kết lần thứ hai, mọi thứ hoạt động hoàn hảo với giá trị chính xác của divId.

Answer 1

Lần đầu tiên bạn nhấp vào liên kết, hàm openSolution được thực thi. Hàm đó liên kết trình xử lý sự kiện click với liên kết, nhưng nó sẽ không thực thi nó. Lần thứ hai bạn nhấp vào liên kết, trình xử lý sự kiện click sẽ được thực hiện.

Điều bạn đang làm dường như đánh bại điểm của việc sử dụng jQuery ngay từ đầu. Tại sao không chỉ liên kết sự kiện nhấp chuột với các phần tử ở địa điểm đầu tiên:

$(document).ready(function() { 
    $("#solTitle a").click(function() { 
     //Do stuff when clicked 
    }); 
}); 

Bằng cách này bạn không cần onClick thuộc tính trên các yếu tố của mình.

Dường như bạn có nhiều phần tử có cùng giá trị id ("solTitle"), không hợp lệ. Bạn sẽ cần phải tìm một số đặc điểm chung khác (class thường là một lựa chọn tốt). Nếu bạn thay đổi tất cả các lần xuất hiện của id="solTitle"-class="solTitle", sau đó bạn có thể sử dụng một bộ chọn lớp:

$(".solTitle a") 

Kể từ trùng lặp id giá trị không hợp lệ, mã sẽ không hoạt động như mong đợi khi phải đối mặt với nhiều bản sao của cùng một id. Điều gì có xu hướng xảy ra là sự xuất hiện đầu tiên của phần tử với id được sử dụng, và tất cả những thứ khác bị bỏ qua.

Answer 2

Bạn không thể có nhiều thời gian cùng một ID cho các phần tử. Nó có nghĩa là duy nhất.

Sử dụng một lớp và làm cho ID của bạn độc đáo:

<div class="solTitle" id="solTitle1"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> 

Và sử dụng bộ chọn lớp:

$('.solTitle a').click(function(evt) { 

    evt.preventDefault(); 
    alert('here in'); 
    var divId = 'summary' + this.id.substring(0, this.id.length-1); 

    document.getElementById(divId).className = ''; 

}); 

Answer 3

Bạn đang chuyển nhượng một onclick sự kiện bên trong một hàm. Điều đó có nghĩa là khi chức năng đã được thực hiện một lần, sự kiện onclick thứ hai cũng được gán cho phần tử đó.

Hoặc chỉ định hàm onclick hoặc sử dụng jquery click().

Không cần phải có cả hai

Answer 4

<div class = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> 

<div class= "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> 



$(document).ready(function(){ 
    $('.solTitle a').click(function(e) { 
     e.preventDefault(); 
     alert('here in'); 
     var divId = 'summary' +$(this).attr('id'); 

     document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */ 

    }); 
}); 

tôi đã thay đổi vài điều:

1. tháo attr onclick và sự kiện ràng buộc nhấp chuột bên trong document.ready
2. thay đổi solTitle là một ID để một CLASS: id không thể được lặp đi lặp lại

Answer 5

HTML sẽ giống như thế:

<div class="solTitle"> <a href="#" id="solution0">Solution0 </a></div> 
<div class="solTitle"> <a href="#" id="solution1">Solution1 </a></div> 

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div> 
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div> 

Và javascript:

$(document).ready(function(){ 
    $(".solTitle a").live('click',function(e){ 
     var contentId = "summary_" + $(this).attr('id'); 
     $(".summary").hide(); 
     $("#" + contentId).show(); 
    }); 
}); 

Xem Ví dụ: http://jsfiddle.net/kmendes/4G9UF/

Answer 6

Cho phép lấy một thẻ neo với một sự kiện onclick, mà các cuộc gọi một chức năng Javascript.

<a href="#" onClick="showDiv(1);">1</a> 

Bây giờ trong javascript viết mã dưới đây

function showDiv(pageid) 
{ 
    alert(pageid); 
} 

này sẽ cho bạn thấy một cảnh báo "1" ....