jQuery onclick должны дважды щелкнуть, чтобы появилось всплывающее окно. Почему?

Question

Привет, у меня две связанные проблемы, я создал всплывающее окно, которое появляется после нажатия на ссылку, однако вы должны дважды щелкнуть, чтобы оно появилось, и я не уверен, почему?

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

Любая помощь будет принята с благодарностью, код показан ниже,

<script type="text/javascript">
var myCallback = function(caller){
    var linkID = caller.id; 
    caller.rel ="gb_page_center[1020, 550]";
    caller.href = "species/butterfly.php?linkID="+linkID;
    var calling = caller.href;

    $(document).ready (function() {
        $('.descript').click(function(event) {
            $('#popup').css('display','block');
            $('#popup').empty();
            $('#popup').load(calling);
        })
    });
}
</script>

Ссылка ниже:

<span id="11" class="bluebells descript"  title="Bluebells (click me)"  onclick="myCallback(this);" ></span>

Спасибо!

Answer 1

Ваш первый клик - это то, что фактически связывает событие click(), попробуйте сделать все в вашем jQuery click и удалите атрибут onclick в вашем диапазоне.

$(document).ready(function() {
    $('.descript').click(function(event) {
        var linkID = this.id;
        this.rel = "gb_page_center[1020, 550]";
        this.href = "species/butterfly.php?linkID=" + linkID;
        var calling = this.href;
        $('#popup').css('display', 'block');
        $('#popup').empty();
        $('#popup').load(calling);
    });
});

<span id="11" class="bluebells descript"  title="Bluebells (click me)"></span>

Пример для jsfiddle

Answer 2

Вы перепривязываете событие click() внутри вашей функции на $('.descript').click(... Это может вызвать событие более одного раза (столько раз, сколько оно связано).

Answer 3

В вашем обратном вызове 'myCallback' вы добавляете в прослушиватель еще один прослушиватель событий щелчка. Каждый последовательный щелчок вызовет еще один дополнительный вызов.