Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm having an issue with the component not firing a click event on button click.
TickerPage
render() {
return (
<div className="TickerPage">
<div className="TickerPage-container">
<br />
<div className='leftContainer'>
<PlayersTable players={this.state.players} />
</div>
<div className='rightContainer'>
<PlayerDetail playerid={this.state.playerid} />
</div>
<div className='bottomTicker'>
<Ticker />
</div>
</div>
</div>
);
PlayersTable
render() {
let tbl = this.buildTable();
return (
<div className="PlayersTable">
<div className="PlayersTable-container">
<button onclick='alert("test")'>test</button>
<h1 className='heading'>Players</h1>
{tbl}
<br />
</div>
</div>
);
}
When I click the button on the PlayersTable, nothing happens. It should have an alert box.
Thanks!
The reason it does not work in your case it is is expected to be a function reference.
The best way to assign the click event is to do it in the createClass method.
JS
<button onClick={this.handleClick}>test</button>
handleClick: function(event) {
alert("test")
},
I would personally avoid including the function definition in inline HTML.
the issue is I had onclick and not onClick
Thanks!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Need a jQuery solution of a JavaScript code and more shorter than it is.
Code:
if (event.target.parentElement.parentElement.parentElement.parentElement.getAttribute("class").include("newSearch"))
where event is coming from,
$(document).on('click', '#divCl > #lnkCl', function (event) {
JQuery version : 2.2.4
HTML Code:
<div class"newSearch">
<div>
<div>
<div>
<div id="divCl">
<div id="lnkCl">
</div>
</div>
</div>
</div>
</div>
</div>
This is not the exact code, as we have different use for the divs in between.
Maybe something like this.
$(document).on('click', '#divCl > #lnkCl', function(event) {
if ($(this).parents(".newSearch").length) {
// do your thing
}
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I don't know if this will be a duplicate, but I've tried multiple scripts (not just in jQuery, but also in Javascript) to try to get the job done. Here's the HTML:
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
And jQuery:
$('#togglebutton').click(function() {
$('text').toggle('slow');
});
Click me to try the Fiddle
I hope you may be able to find a solution. Thanks :D
use #test instead of test to select an id attribute in jquery
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
Because you're selecting an ID, $('text') should be $('#text')
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
You're missing the # sign for the text attribute.
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>
After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});
This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more
Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have this "list":
<div class="list">
<div class="test" data-id="1"></div>
<div class="test" data-id="2"></div>
<div class="test" data-id="3"></div>
<div class="test" data-id="4"></div>
<div class="test" data-id="5"></div>
</div>
i need to get data attribute of all elements, so i do this:
var _this = $('.list'),
_el = _this.find('div');
var _id = $.map(_el, function(el) {
return {name: 'offer-id', value: $(el).data('id')}
});
but what i get is only attribute of first element... What is wrong? Fiddle: http://jsfiddle.net/4DRxz/
As per jQuery documentation, the map function will return you an array with the mapped elements. You can iterate over them if you need each one.
Like:
for(var i=0; i<_id.length; i++){
// do stuff with _id[i].value here
}
or by using $.each as suggested by another answer.
Updated fiddle