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, Dec 18 '15 at 07:00

score 0 · Answer 1 · answered Dec 18 '15 at 07:18

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 '15 at 07:18

varun

652
4
5

i tried this works on html elements outside the react code but not works on render html elements – Param Dec 18 '15 at 07:21
Can you register click listener inside reactJS code. This link may be helpful http://stackoverflow.com/questions/26556436/react-after-render-code – varun Dec 18 '15 at 07:39

score 0 · Answer 2 · answered Dec 18 '15 at 08:53

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 '15 at 08:53

hazardous

10,627
2
40
52

Perform any action events on react render HTML

2 Answers2