All geek questions in one place

Can you 'click' load content in jQuery?

I am trying to create a page where an example div can be clicked, as it will be below.

However, I am trying to do so if the user clicks the logo, it will reload the original content using the load.

After this download, maybe a 'click' loaded <div id="example"> ? I am trying to do this at the moment, and it cannot notify when I click on the downloaded <div id="example"> , which is located in file.php

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#example").click(function(){ alert("You clicked me!"); }); $("#logo").click(function(){ $("#main").load("file.php"); }); }); </script> </head> <body> <img id="logo" src="404.gif" /> <div id="main"> <div id="example">This is content.</div> </div> </body> </html>

file.php contains

 <div id="example">This is loaded content that can't be clicked?</div>
+2
source share
6 answers

Problem

The problem is that .click() only binds events to elements that exist in the DOM at this point in time. This means that when you add a new element to the page, it will not be bound to the event handler.

Decision

If you are using jQuery 1.7+, use .click() instead of using .click() in your code.

 $("#main").on('click', '#example', function(){ alert("You clicked me!"); });

... or older versions of jQuery use .live() instead:

 $("#example").live('click', function(){ alert("You clicked me!"); });

This ensures that new elements added to the DOM receive an associated event handler.

+6
source

try it,

 $("#example").live('click',function(){ alert("You clicked me!"); });
+1
source

The problem is that after replacing innerHTML with <div id="main"> , <div id="example"> the click action no longer works.

There are several ways to solve this problem:

First and probably the best way is to use .on() :

 $("#main").on('click', '#example', function(){ alert("You clicked me!"); });

This applies to #main , and therefore it doesn't matter what you do with the content inside. As events bubble up, they will be noticed on , and then the selector will determine if the handler should execute.

The second is living. The following will replace your current click with #example :

 $("#example").live('click', function(){ alert("You clicked me!"); });

One of the drawbacks is that jQuery constantly monitors dom for any changes that, depending on how much you have, may begin to slow down (although it may not be noticeable on faster machines). Also .live() deprecated in 1.7.

The final option is to add the success function to the #logo click. I would recommend creating a method so that you don't have duplicate code:

 var example_click = function() { alert("You clicked me!"); }; $("#example").click(example_click); $("#logo").click(function(){ $("#main").load("file.php", example_click); });

This means that every time after #main loads successfully, a click will be added to #example . But this is disgusting, since you need to call the function twice.

+1
source

If you are using jquery 1.7+, use "on".

http://api.jquery.com/on/

As with jQuery 1.7, the .live () method is deprecated. Use .on () to attach event handlers.

+1
source

Try putting the click() function for the example div in the callback for the load function.

0
source

jQuery 1.7 introduced the .on() API for event binding and event delegation:

 $("#main").on("click", "#example", function() { alert("You clicked me!"); });
0
source

Source: https://habr.com/ru/post/903943/

More articles:


All Articles