Jquery on () не работает

Question

var btnid=0;
function show_visited_stops(bus_stops_visited,map){


                var $k=0;
                var visited_bus="";
                var total_time=0;
                visited_bus="<table border=\"1\">";
                while($k<bus_stops_visited.length){

                $A=bus_stops_visited[$k];

                if ($k==bus_stops_visited.length-1){
                var latlng=findlatlng($A);
                var name=find_stop_name($A);
                btnid++;
                var btn_id="btn"+btnid;
                visited_bus+="<tr><td><button id="+btn_id+" class=\"linked\">"+name+"</button></td>"+ "<td>"+"Time taken:"+total_time.toFixed(2) +'min'+ "</td></tr>";
                var c="#"+btn_id;
                $(c).on("click", function(event){
                    alert("DSD");
                });

                    break;
                }
                $k=$k+1;
                $B=bus_stops_visited[$k];

                var name=find_stop_name($A);
                btnid++;
                var btn_id="btn"+btnid;
                visited_bus+="<tr><td><button id="+btn_id+" class=\"linked\">"+name+"</button></td>"+ "<td>"+"Time taken:"+total_time.toFixed(2) +'min'+ "</td></tr>";
                var c="#"+btn_id;
                $(c).on("click", function(event){
                    alert("DSD");
                });



                total_time+=parseFloat(find_edge_weight($A,$B));



            //  alert("edge traversed"+edge_traversed);
        }
        visited_bus+="</table>"; 

        alert(visited_bus);
        return visited_bus;
}

Я хочу, чтобы к каждой сгенерированной кнопке было прикреплено событие нажатия.Но это не работает.Я также попытался .click () .bind () тоже не работает.

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

ОБНОВЛЕНИЕ: Я получил решение: я использовал

$(document).on("click", c, function(){ alert("Goodbye!"); });

Answer 1

Шаг за шагом:

1. Вы создаете идентификатор:

   var btn_id="btn"+btnid;
   

2. Вы создаете строку, которая будет узлом dom , позже

   visited_bus+="<tr><td><button id="+btn_id+"....</td></tr>";
   

3. Вы пытаетесь добавить обработчик события к кнопке, но эта кнопка еще не существует, поэтому событие щелчка будет прикреплено к ... ничему.

   $("#"+btn_id).on("click", function(event){ alert("DSD"); });
   

Возможное решение: не возвращать строку html, а объект jQuery с реальными элементами внутри:

    // before return actually create elements
    var $visited_bus = $(visited_bus);
    // now you can attach events to these group of elements
    $visited_bus.on("click", function(event){ alert("DSD"); });
    // change the caller function to deal with the different result type
    return $visited_bus;

Answer 2

Вы создаете элемент c на лету, и поэтому событие не работает.Вы должны прикрепить событие on к элементу, созданному ранее.

Например, вы можете попробовать это.

$(document).on("click", "button.linked", function(event){
    alert("DSD");
});

Answer 3

Это потому, что вы устанавливаете обработчик click до загрузки элемента в DOM.

Answer 4

Вы пытаетесь связать событие, даже не добавляя HTML в документ или documentmeFragement.

Если вы хотите использовать функцию on для обработки событий для динамически создаваемых событий, то переместите обработчик событий on click вне функции и прикрепите его к элементу, который будет присутствовать.на странице загрузки или которые не обновляются никаким действием на странице, или прикрепить его к документу.Попробуйте это.

//Here instead of document you can use a container which will host this table 
$(docuemnt).on('click', '.linked', function () {
     alert("DSD");
})

Answer 5

Выполните следующие шаги,

Шаг 1: В функции show_visited_stops измените нижнюю строку,

visited_bus="<table border=\"1\">";

на

visited_bus="<table border=\"1\" class=\"visited_stops_tbl\">";

Шаг 2: Реализуйте метод .on в следующем синтаксисе:

$('.visited_stops_tbl').on ('click', '.linked', function () {
   //btn click function
})

Шаг 3: Добавьте код шага 2 на место сразу после таблицывставлен.