Button create whith JQuery

Кто не такой. Я создам две кнопки: одну с html, другую jQuery. Когда я нажал «HTML creat», вы увидите сообщение и создайте кнопку. Когда я нажал «JQuery Creat отображает сообщение. Но когда я нажал на вновь созданную кнопку„My Button“в сообщении неButton create whith JQuery

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> 
<script> 
    function appendText() { 
     var button = $("<button>My Button</button>"); 
     $('p').append(button); 
    } 
    $(document).ready(function() { 
     $("button").click(function() { 
      alert($(this).attr("id")); 

     }); 
    }); 
</script> 
</head> 
<body> 

<p>This is a paragraph.<br></p> 
<div> 
    <button onclick="appendText()">HTML creat</button> 
</div> 
<script> 
    var button = $("<button>JQuery creat</button>"); 
    $('div').append(button); 
</script> 

</body> 
</html>

источник

2013-03-22 user2199180

У новой кнопки 'button' нет подключенного к ней слушателя, так что должно случиться? – Bergi

Вы должны использовать on() приложить события с динамически создаваемыми элементами. Вы можете делегировать событие ближайшего родителя кнопки или документа.

$(document).ready(function() { 
    $(document).on("click", "button", function() { 
     alert($(this).attr("id"));  
    }); 
});

Делегат событие родительского DIV, было бы лучше, если бы вы назначить идентификатор или класс родительского DIV и использовать идентификатор или селектор класса делегировать событие.

$('div').ready(function() { 
    $(document).on("click", "button", function() { 
     alert($(this).attr("id"));  
    }); 
});

источник

2013-03-22 12:53:44 Adil

Предпочитаете использовать 'delegate'over' on' –

@TejaKantamneni Вы должны использовать делегат, если вы находитесь на '-1.7'. '.on' заменяет' .delegate' на '1.7' –

@TejaKantamneni OP использует jQuery версии 1.9, а в jQuery 1.7' .delegate() 'заменен методом' .on() '. –

$(document).ready(function() { 
    $(document)on('click', 'button', function() { 
     alert($(this).attr("id")); 

    }); 
});

Сырые JS (ie8 не считаются):

window.addEventListener('load', function(){ 
    document.addEventListener('click', function(e){ 
     if(e.target.tagName === 'button'){ 
       alert(e.target.id); 
     } 
    }); 
});

источник

2013-03-22 12:55:02 karaxuna

Сокращенное обозначение не содержит пояснений. –

"JQuery Создать" кнопка не добавляет кнопки, так как вы никогда не называется функцией appendText() ... Я удалил прямой вызов с кнопки «Моя кнопка» и добавил вызов appendText в функцию привязки кликов.

Попробуйте этот код:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> 
<script> 
    function appendText() { 
     var button = $("<button>My Button</button>"); 
     $('p').append(button); 
    } 
    $(document).ready(function() { 
     $("button").click(function() { 
      alert($(this).attr("id")); 
      appendText(); 

     }); 
    }); 
</script> 
</head> 
<body> 

<p>This is a paragraph.<br></p> 
<div> 
    <button>HTML create</button> 
</div> 
<script> 
    var button = $("<button>JQuery create</button>"); 
    $('div').append(button); 
</script> 

</body>

источник

2013-03-22 12:59:52 sagibb

Это мой ответ:

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> 
<script> 
    function appendText() { 
     var button = $("<button>My Button</button>"); 
     $('p').append(button); 
    } 
    $(document).ready(function() { 
     $(document).on("click", "button", function() { 
     alert($(this).attr("id"));  
}); 
    }); 
</script> 
</head> 
<body> 

<p>This is a paragraph.<br></p> 
<div id="myDiv"> 
    <button onclick="appendText()">HTML creat</button> 
</div> 
<script> 
    var button = $("<button onclick='appendText()'>JQuery creat</button>"); 
    $('#myDiv').append(button); 

</script> 

</body> 
</html>

Не будьте так грубо, я все еще учусь ... проверено на локальном хосте; новая сгенерированная кнопка выдает предупреждение при нажатии.

Saludos;)

источник

2013-03-22 13:08:27 Hackerman

Пожалуйста, объясните, что вы изменили и почему. – Bergi

Я добавляю кнопку Jquery creat к div id = "myDiv" и добавлен вызов функции onclick appendText .... и в функции appendText я меняю кнопку на эту часть кода $ (document) .on ("click "," button ", function() { alert ($ (this) .attr (" id ")); }); .... документ. сделайте трюк .... я испанский, извините за пропущенную часть объяснения;) – Hackerman

document.ready функция вызывается после того, как документ будет готов.

1 - Когда ваш документ закончен, кнопки «Моя кнопка» нет, поэтому ни один из них не будет связан с прослушивателем событий.

Чтобы сделать то, что вы хотите, вы должны связать слушателя при создании кнопки, что-то вроде этого:

var button = $("<button>My Button</button>"); 
button.click(function() { 
    alert($(this).attr("id")); 
}); 
$('p').append(button);

2 - Кроме того, ваш Jquery слушателя щелкнуть это перезапись OnClick свойство элемента. Чтобы избежать этого, гибко и называть их обоих, добавьте это к вам нажмите слушателем

eval($(this).attr("onclick"));

Вы можете проверить это jsFiddle, чтобы увидеть эти вещи работать.

источник

2013-03-22 13:12:09

Ну, я думаю, проблема в том, как вы связываете событие .click. До jQuery 1.7 у них были отдельные методы для .bind, .delegate и .live. Но с приходом jQuery 1.7 эти методы были объединены, чтобы упростить вещи, включив их все под 1 метод .on. Но из-за не столь четкой документации люди не понимают метод .on. .on действительно обеспечивает функцию 3 вышеупомянутых устаревших методов, но это зависит от того, как вы используете метод .on.Вот пример:

// Bind 
$("button").on("click", function(e) {}); 

// Live 
$(document).on("click", "button", function(e) {}); 

// Delegate 
$("body").on("click", "button", function(e) {});

Я думаю, что разметка button, которая не работает в настоящее время объявлен после того, как ваш .click будет связывать. В этом случае вам нужно будет выполнить команду .on, как это делается для живых событий. Таким образом, все, что вам нужно изменить, - это то, как вы связываете вызов.

$(document).on("click", "button", function() { 
     //Do Something 
});

Надеюсь, это поможет.

источник

2013-03-22 13:15:46

Button create whith JQuery

ответ

Смежные вопросы