JQuery live doesn't work - javascript

I try to get .live content into a div when there is a keyup... I looked at the forumtopic here but I didn't find the answer...
Why does my code not works? I use this JQuery:
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// When the document is ready set up our sortable with it's inherant function(s)
$(".atleetnaamlink").live('keyup', function(){
alert('test');
});
</script>

try on
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
$(document).ready(function() {
$("body").on('keyup' ,'.atleetnaamlink', function(){
alert('test');
});
});
DEMO

.live() is deprecated. Use .on() instead. That will work.
$(".atleetnaamlink").on('keyup', function(){
alert('test');
});

You are missing }); and Working demo http://jsfiddle.net/JwRRH/
Hope it helps :) by the way live is deprecated and if you keen check this out What's wrong with the jQuery live method?
code
$(document).ready(function() {
// When the document is ready set up our sortable with it's inherant function(s)
$(".atleetnaamlink").live('keyup', function(){
alert('test');
});
});​
or*
$(document).ready(function() {
// When the document is ready set up our sortable with it's inherant function(s)
$(document).live('keyup',".atleetnaamlink", function(){
alert('test');
});
});​

Add this above:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
and see if this works.
and important thing not to forget to accept it if it solves your issue.

Related

jquery. livequery() strange behavior

trying to run jquery plugin "livequery" to highlight some words in a dynamically generated search results doesn't work !
However adding an alert() function before excuting the code make the highlighting appear! so what is the problem?
$(document).ready(function(){
$('#searchResults').livequery(function(el){
// alert('test');
$( '#searchResults' ).highlight( highlightArray );
});
});
Can you try adding some delay by setTimeout()
$(document).ready(function(){
$('#searchResults').livequery(function(el){
// alert('test');
setTimeout(function(){
$( '#searchResults' ).highlight( highlightArray );
},400);
});
});
Why do you still use livequery? It is not necessary by now. It was before jQuery delegated events. See this SO answer for more informations. Use .on() instead of livequery().
So you can just do
$(document).on('change','#searchResults',function(el){
$('#searchResults').highlight(highlightArray);
});

jquery migration from 1.7 to 1.10.1

I'am trying to migrate from jquery 1.7 to 1.10 and the live function do not work anymore.
$("#detail_content").on("click", ".close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
the div.detail_content is loading later via ajax but the close button do not work anymore if i change from .live to .on
I think the delegation is missing.
any idea?
Looks like #detail_content also is an dynamic one, then try
$(document).on("click", "#detail_content .close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
You should use any closest static parent element (or body at last):
$("body").on("click", "#detail_content .close", function() { ... });
So if you have the markup like:
<body>
...
<div id="container">
...
<div id="detail_content"><button class="close">Close</button></div>
</div>
</body>
and #container is not replaced after Ajax call, then it is better to use:
$("#container").on("click", "#detail_content .close", function() { ... });
The .live() method is deprecated in jQuery 1.10 and above. Use .on() method to attach event handlers.
So you can use this code instead of .live()
$(document).on('click', '#detail_content .close', function(){
//your Code
});
I think this answer is useful for you and in this page you can see all deprecated method and it's useful for someone who want to migration from 1.7 to 1.10
VisioN, is it not the same to just use the following?
$(document).ready(function(){
$(".close").click(function(){
console.log("clicked");
}
});
Is there something about the code above that is slower or less efficient somehow?

JQuery click on link not working

Ive the following code:
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").click();
});
});
</script>
where btnSave is anchor element with ID btnSave, shortcut is from http://www.openjs.com/scripts/events/keyboard_shortcuts/ . If i change the line $("#btnSave").click(); to document.getElementById("btnSave").click() - all works fine. The question is why jquery implementation is not working in my case?
PS: made jsfiddle for my case: http://jsfiddle.net/0x49D1/WCmeU/
Here is the guy with similar problem: http://forums.asp.net/t/1591818.aspx
Instead of $("#btnSave").click(); try with $("#btnSave").trigger('click');
You can also use $("#btnSave")[0].click(); which is jquery equivalent to document.getElementById("btnSave").click();
Update:
It's not possible to simulate a user link click from javascript, for security reasons, all you can do is attach your own handler for click event and redirect based on the href of the link, like so:
$("#btnSave").bind('click', function() {
window.location.href = $(this).attr('href');
});
try this
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").live('click',function(){
// do stuff here
});
});
}); </script>

The "not:()" selector isn't working with ".live()" when event binding

When I added live() to some mousedowns, my not: conditional stopped working.
$("body :not(" + _self.somevar + ")").live('mousedown',
function(event){
event.stopPropagation();
// some more code
}
When it wasn't live() it worked. Now that I use live(), when I mousedown on that item, it fires when it shouldn't.
Anyone know why not: is no longer adhered to?
You can update your .live() method to .on() (to work with new versions of jQuery). So you need apply on the document an event of mousedown selecting the body :not(#notAcceptedElement). Example:
HTML:
<div id="notAccept">Not Accept Mousedown</div>
<div id="accept">Accept Mousedown</div>
JS (jQuery 1.6):
$('body :not(#notAccept)').live('mousedown', function(ev) {
console.log(ev.target);
$('#accept').clone().appendTo(document.body);
});
JS (jQuery edge/1.8):
$(document).on('mousedown', 'body :not(#notAccept)', function(ev) {
console.log(ev.target);
$('#accept').clone().appendTo(document.body);
});
​
Live example: jsFiddle jQuery-1.6, jsFiddle jQuery-edge.
I hope you know only one body tag you can use in a HTML page. In your case its better if you try to attach event for id/class. and syntax will be something like this,
For id of element
$("#not:'+ _self.somevar'+").live('mousedown',
function(event){
event.stopPropagation();
// some more code
}
For class of element
$(".not:'+ _self.somevar'+").live('mousedown',
function(event){
event.stopPropagation();
// some more code
}

jquery click function is not working

The below code is working when i paste it in the browser directly (chrome console). But it is not working from my source file
<script type="text/javascript" >
$(".test").click(function(){
$(this).parent().find("div").toggle();
});
</script>
Try running it only after the DOM is ready:
$(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
try replace $ by writing jQuery..
like,
jQuery(function(){
make sure you wrap in the document.ready function. it ensure that it will bind the function when the page load completes. Document.ready()
$(document).ready(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
Always do this while using jquery
$('document').ready(function(){
$(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
});
Always put code in the function this will make it work with and with out document ready.

Categories