All geek questions in one place

Click event not working inside jQuery dialog

There was a problem with the fact that I have a form page that I open using the jQuery dialog box. But on this page I need to use the .click event for some objects, but this does not work. The code for this case is a simple alert () test from this page.

<input type='text' class='input_date' value='' readonly />

Therefore, I want to receive a warning when I click on the input field inside this dialog form.

 $('.input_date').click(function() { alert('hi') });

What is the problem, how can I get this working? Thanks

+4
source share
6 answers

This is because you do not have the object that you want to associate with the event at the time jquery is executed.

You need to delegate bind the event in the parent container or use the getScript jquery method after loading your dialog.

 <div id="dialogContainer" /> $('#dialogContainer').on('click', '.input_date', function(){ alert('hi'); });
+4
source

If the html dialog is dynamically generated, your clickback will not be bound to the .input_date element. Use this instead:

 $('.input_date').live('click',function() { alert('hi') });
+1
source

Other options inside document.ready:

 $(".input_date").keyup(function(){ alert('hi'); });

or

 $(".input_date").change(function(){ alert('hi'); });
0
source

Place the click event in an open callback, for example:

 $( ".selector" ).dialog({ open: function( event, ui ) { $('.input_date').click(function(){ alert("hi!"); }); } });
0
source

It will work fine, you just need to set the attribute to read, as if this:

 <input type='text' class='input_date' value='' readonly="readonly"> $('.input_date').click(function () { alert('hello'); });
0
source

You did not provide a document ready function from jquery. You can do it with

 $(function() { // your code });

Example of your program

 <html> <head> <title>Untitled</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function() { $(".input_date").bind("click", function(){ alert("hi"); }); }); </script> </head> <body> <input type='text' class='input_date' value='' readonly /> </body> </html>
0
source

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

More articles:


All Articles