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

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>

i tried this works on html elements outside the react code but not works on render html elements
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

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.

Collectives™ on Stack Overflow

Perform any action events on react render HTML

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related