Perform any action events on react render HTML

Question

I am rendering Html in react JS that is:

return (
                                <div>
                                 <table id="displaydata">

                                          <td className="update_record"><a href={"http://localhost/PHP-React-Demo/update_record.html?id=" + d.id}><img className="edit" src="http://localhost/PHP-React-Demo/images/edit_logo1.png"/></a></td>
                                          <td className="delete_record"><input id="closeAuction" type="image" className="delete" src="http://localhost/PHP-React-Demo/images/delete-button.png"/></td>
                                          </tr>
                                          )}
                                  )}
                               </table>
    </div>
    )

And now I want perform JQuery actions on click of image. I have tried for onClick and now trying the following JQuery code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        $(document).ready(function() {     
            $('#closeAuction').click(function() {
                location.reload();     
            });    
        });
    </script>

This JQuery code but it shows nothing. Only html rendered the action is not performing.

Do you really need to use jQuery here or could you solve this by using more the React model? OnClick's, for example, can be perfectly solved within React without jQuery around at all. — janpieter_z
– janpieter_z, Commented Dec 18, 2015 at 7:00

varun · Accepted Answer · 2015-12-18 07:18:47Z

0

Instead of this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    $(document).ready(function() {     
        $('#closeAuction').click(function() {
            location.reload();     
        });    
    });
</script>

Try this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
    $(document).ready(function() {     
        $('#closeAuction').click(function() {
            location.reload();     
        });    
    });
</script>

answered Dec 18, 2015 at 7:18

varun

6624 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Param Over a year ago

i tried this works on html elements outside the react code but not works on render html elements

varun Over a year ago

Can you register click listener inside reactJS code. This link may be helpful stackoverflow.com/questions/26556436/react-after-render-code

hazardous · Accepted Answer · 2015-12-18 08:53:56Z

0

Change your code to this-

 $(document).ready(function() {     
        $(document).on('click', '#closeAuction', function() {
            location.reload();
        });
 });

But ideally you should not be needing jQuery anymore with React.

answered Dec 18, 2015 at 8:53

hazardous

10.8k2 gold badges44 silver badges55 bronze badges

Collectives™ on Stack Overflow

Perform any action events on react render HTML

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related