Use .click(function() in js multiple times in same page

Question

1.00/5 (1 vote)

See more:

I am using

.click(function() {

for two functions in same page , one is for a javascript function and another is ajax function , the ajax function is working good until i added the javascript function , if i add javascript function then ajax function stops working , if i remove javascript funtion the ajax functions works good , how do i solve this ?

What I have tried:

this is in javascript

var radioButtons = $("input[type='radio'][name='rr']");
       var radioStates = {};
       $.each(radioButtons, function(index, rd) {
           radioStates[rd.value] = $(rd).is(':checked');
       });

       radioButtons.click(function() {

           var val = $(this).val();
           $(this).attr('checked', (radioStates[val] = !radioStates[val]));

           $.each(radioButtons, function(index, rd) {
               if(rd.value !== val) {
                   radioStates[rd.value] = false;
               }
           });
       });

this is in ajax

echo '

<script>
 $(document).ready(function(){  
      $('.$aaa.''.$input.''.$aaa.' ).click(function(){
		   alert( "clicked" );
           var gender = $(this).val(); 
		   var namee = $("#txtt_name").val();
		   var mark = jQuery("#markvalue").val();
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{"gender":gender, "name":namee, "question":'.$aa.', "empty":mark}, 
                success:function(data){  
                     $('.$result.').html(data);  
                }  
           });  
      });  
 });  
 </script>  ';

Posted 4-Apr-21 21:54pm

Member 11755075

Updated 6-Apr-21 4:13am

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2021-04-06T04:13:00

Well - if you used the simple version of onclick event, that is, the declaration in the element, then you'd have no problem (you'd give each function a different name).

JavaScript

<button onclick="doThis()"><button>
<button onclick="doThat()"><button>

Of course, the above is "real" javaScript.

Alternatively, you could have a single function and send in an object argument (by which I mean something like an id value) which you handle in a switch. One function, many outcdomes (and poor but successful coding).

SeanChupas · Answer 2 · 2021-04-05T04:03:00

Solution 1

You are adding the onclick event to the inputs twice. You need to narrow down your selector's better.

Posted 5-Apr-21 4:03am

SeanChupas

Richard Deeming · Answer 3 · 2021-04-06T03:24:00

At a guess, your radiobuttons are stored inside the element which matches the $('.$result.') selector. When your AJAX call returns, you replace the entire contents of that element, including the radiobuttons. Any event handlers previously attached to those elements will no longer fire.

You need to use delegated events instead:
.on() | jQuery API Documentation[^]

JavaScript

$(document).on("click", "input[type='radio'][name='rr']", function(){
    var val = $(this).val();
    radioStates[val] = !radioStates[val];
    $(this).prop('checked', radioStates[val]);
    
    $("input[type='radio'][name='rr']").not(this).each(function(){
        radioStates[this.value] = false;
    });
});

Use .click(function() in js multiple times in same page

3 solutions

Solution 3

Solution 1

Solution 2

Add your solution here

Preview 0