Используйте jquery click для обработки якоря onClick ()

Question

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

<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.Почему бы просто не привязать событие click к элементам в первую очередь:

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

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

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

Теперь в javascript напишите следующий код

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

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

Answer 3

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 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 и bind click внутри документа .ready
2. изменил solTitle на идентификатор класса: идентификатор не может повторяться

Answer 5

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

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

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

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

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

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