Использование JQuery нажмите для обработки якорный OnClick()

Question

У меня есть набор динамически формируемых тегов якорь в цикле следующим образом:

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

После того, как этот код выполняется вывод HTML для одного случая будет выглядеть например:

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

Теперь я хочу, чтобы разные тексты отображались при нажатии на указанные ссылки. openSolution() выглядит следующим образом:

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

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

    }); 
} 

Когда я исполню его и нажать на одну из ссылок, поток оленьей кожи приходит внутри обработчика JQuery щелчка. Я проверил его с помощью вышеупомянутых предупреждений. Он отображает только предупреждение - «здесь», а не предупреждение - «здесь». При повторном нажатии ссылки все работает отлично с правильным значением divId.

Answer 1

Первый раз, когда вы нажмете на ссылку, функция openSolution выполняется. Эта функция связывает обработчик события click с ссылкой, но не выполняет его. Во второй раз, когда вы нажмете ссылку, будет выполнен обработчик события click.

То, что вы делаете, похоже, как бы поражает точку использования jQuery в первую очередь. Почему бы не просто связать события нажатия на элементы, в первую очередь:

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

Таким образом, вам не нужно onClick атрибуты ваших элементов.

Похоже, что у вас есть несколько элементов с тем же значением id («solTitle»), что является недопустимым. Вам нужно будет найти другую общую характеристику (class обычно является хорошим вариантом). Если вы меняете все вхождения id="solTitle" в class="solTitle", вы можете использовать селектор класса:

$(".solTitle a") 

Поскольку дублирующие id значения недействителен, код не будет работать, как и ожидалось, сталкиваясь несколько копий одного и того же id. Что имеет место, так это то, что первое вхождение элемента с этим id используется, а все остальные игнорируются.

Answer 2

У вас не может быть многократно одинакового идентификатора для элементов. Он должен быть уникальным.

Используйте класс и сделать свои уникальные идентификаторы:

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

и использовать селектор класса:

$('.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

Вы Назначив onclick событие внутри функции. Это означает, что как только функция выполнила один раз, второму событию onclick присвоен элемент.

Либо назначьте функцию onclick, либо используйте jquery click().

Там нет необходимости иметь оба

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'); */ 

    }); 
}); 

Я изменил несколько вещей:

1. снимите OnClick Attr и событие связывает щелчок внутри document.ready
2. изменил solTitle быть идентификатором класса: идентификатор не может быть повторена

Answer 5

HTML, должен выглядеть следующим образом:

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

И JavaScript:

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

Смотрите пример: http://jsfiddle.net/kmendes/4G9UF/

Answer 6

Lets взять якорь тег с событием OnClick, который вызывает функцию Javascript.

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

Теперь в JavaScript написать код, приведенный ниже

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

Это покажет вам предупреждение "1" ....