score:1
Accepted answer
this is because you are trying to bind a click handler to a dynamically generated element. while you can get around this:
click event doesn't work on dynamically generated elements
const app = () => (
<div>
<button classname="btn btn-primary" id="viewthis"> view this</button>
</div>
);
reactdom.render(<app />, document.getelementbyid('app'));
$('#app').on('click', '#viewthis', () => console.log('clicked'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
you probably just want to use onclick
in the component:
const app = () => (
<div>
<button classname="btn btn-primary" onclick={() =>console.log('clicked')}> view this</button>
</div>
);
reactdom.render(<app />, document.getelementbyid('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Source: stackoverflow.com
Related Query
- Can we apply Reactjs and Jquery together on HTML DOM element
- Canvas element does not resize when using ReactJS and PaperJS together
- Can I create a React Element from an HTML string or dom node/element
- React DOM create html element and bind function to setState
- How can I pass a DOM element to an HTML attribute? ReactJs/ Javascript
- How can Reactjs update only part of text in a html dom element?
- How can i create a new element and add onclick attribute to it using dom Manipulation in react
- How can I respond to the width of an auto-sized DOM element in React?
- ReactJS Bootstrap Navbar and Routing not working together
- How can I use passportjs and reactjs together?
- ReactJS change color of element on scroll and when certain position is reached
- How can I ensure a reactjs state is updated, and then call a function?
- Reactjs Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
- How can I create a style element and append to head in React?
- How can I convert React Element to Html element?
- ReactJS and JSX - can I have uncontrolled checkbox?
- How can I combine a React element and text inside a ternary?
- React and using ReactDOM.createPortal() - Target container is not a DOM element Error
- jQuery and ReactJS ONLY animations
- How to apply an id attribute to a child element of a ReactJS component?
- ReactJS and Material UI TreeView: can I use a JSON/array of object to populate the TreeView?
- reactjs and rendering plain HTML
- Shadow DOM and ReactJS
- Are ReactJS and jQuery mutual exclusive?
- How do you call a jQuery function on a ReactJS element from .jsx script?
- How To Apply Inline Style and className to Same Element
- ReactJS - PopUp Component Error: Target container is not a DOM element
- How can I debug webpack bundle file error and find exact error in bundle that consists thousand no. of lines in reactJs
- How can I configure react-router to with nginx/cherrypy and my current reactjs app
- how to test a react hook that can have a ref of an html element passed to it
More Query from same tag
- React setState for nested object while preserving class type
- How to Remove Arrow on Input type Number with Tailwind CSS
- Render timeout dialog in other route components
- react init app only after calling function in html file
- Change the base color font from stripe CardNumberElement on Material UI
- How onChange checkbox after checked based on index and selected 1 by 1
- Checking looped radio buttons
- React Checkbox always returns false after handleFormSubmit
- React.js - changing text in a list
- React Router - Parent re-rendering when navigating sub-routes
- How to use Fabric in Gatsby?
- expiration date of decoded token from firebase compared to Date.now()
- Click onClick twice in <Link> to update state
- React unable to change default value
- Handling array length in React
- react-select detached reset button does not work with disabled attribute
- Search form within the Results page - ReactJs
- How to set document's title per page?
- Code splitting application sections via dynamic imports
- Using jest-fetch-mock and receiving null
- Deleting Specific Item From Array in React using Functional Components/Hooks
- react context not working when provider placed at certain parts of the element tree
- how to hide horizontal lines from the table without hiding vertical lines (Material-ui)
- se the value of a property of a object using the value of property of another object
- How to convert string to React Component
- Pass a relative image url to a Reactjs component from asp.net
- React and useReducer unable to access the state value
- declare type with React.useImperativeHandle()
- Explaining how to remove a bootstrap-card in REACT
- Error: Unhandled Rejection (TypeError): Cannot read property 'livres' of undefined, ReactJS, Search