jQuery click () не работает на замененный HTML

Question

Я пытаюсь создать игру go-moku , используя базы данных jquery, php и mysql. У меня есть функция ajax, которая обновляет доску каждую секунду, если это необходимо.

var turnCount = -1;
setInterval(function(){
    $.get('includes/boardControl.php',{turn: turnCount }, function(data){
        if(data != "")
        {   $("#board").html(data);
            turnCount = $("#turnCount").text();
            $("#turnCount").text("")
        }
    });

}, 1000);

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

У меня есть несколько вопросов.

1) Моя функция щелчка сейчас

$(document).ready(function() {
    $("td > img").click(function(){
        alert("clicked");
    });
});

на данный момент он работает с дополнительной тестовой таблицей, которую я записал в html, но не с таблицей, созданной с помощью предыдущей функции. Что я делаю не так?

2) Учебники, на которые я смотрел до сих пор, требуют, чтобы я написал код следующим образом.

$(document).ready(function() {
  //code here
});

Когда я вчера вечером задал вопрос, мне сказали, что я слишком усложнил свои функции. Итак, когда я должен использовать функцию document.ready, а когда нет? И можно ли поместить все мои скрипты в одну функцию document.ready или я должен иметь несколько?

3) Как только я получу изображение клика, я надеюсь отправить координаты X, Y на сервер и изменить соответствующее место на доске. Как определить, по какой ячейке таблицы щелкают, чтобы узнать, какие координаты использовать? (или есть намного более простой способ?)

Answer 1

звучит так, как вам нужно изменить

$("td > img").click(function(){
                alert("clicked");
        });

до

$("td > img").live('click',function(){
                alert("clicked");
        });

Редактировать: Для jQuery 1.9 и более поздних версий вы можете сделать:

$("#board").on('click', 'td > img', function(){
  // handle click
});

Answer 2

Функция $(document).ready() срабатывает только при первой загрузке страницы - чтобы заставить эту работу попробовать что-то вроде этого:

function bindClicks() {
    $("td > img").click(function(){
        alert("clicked");
    });
}

$(document).ready(bindClicks);

Это позволит вам позже позвонить bindClicks(), если необходимо связать события щелчка новой таблицы.

Answer 3

Вы уверены, что JQuery соответствует вашему запросу:

$ ("td> img")

Я бы загрузил firefox с помощью firebug и проверил, что вы на самом деле получаете совпадение первым. Вторая таблица, которую вы создали, может иметь немного другую структуру, чем вы ожидали, и firebug может показать вам точную структуру.

Гудлак.

Answer 4

1) Переписываете ли вы событие click после загрузки содержимого ajax?

Функция $(document).ready сработает, как только страница полностью загрузится, но не сработает после вызовов ajax. Поэтому вам нужно будет повторно подключать событие click после каждого вызова ajax:

2) ПОЦЕЛУЙ. Сделайте это как можно проще. Если внутри оператора document.ready имеется более 50 строк, возможно, вы захотите создать некоторые функции.

3) Лучший способ сделать это - назначить конкретный идентификатор каждой ячейке и зафиксировать его в событии щелчка. Затем вы можете передать это на сервер и обновить конкретную ячейку при возврате.