I have a jquery function whichh looks like this:
<script type="text/javascript">
$(document).ready(function() {
$('a#id').click(function(e){
e.preventDefault();
var id = $(this).attr('pid');
var title = $(this).attr('ptitle');
$('#product_list').prepend('<input type="hidden" value="'+ id +'"/><div>'+ title +'</div>')
});
});
</script>
I have a javascript file which has this code here:
> http.open('get', 'livesearch.php?name='+searchq+'&nocache =
> '+nocache+'&type=bookings/products');
The livesearch.php file has the a element (which the jQuery is requesting) like this:
Add
However when I click on the a element the jQuery doesn't respond. Could any please help?
Thanks
Peter
Use either live or delegate to add the click event because the element is not present in the DOM at the time the event is bound.
$('#id').live('click', function(e){
alert('you clicked the id element' );
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I created a table with radio button using ajax request. I want to get value from radio button by click event. But jquery event doesn't work on radio button.
my created table by ajax below
I have called this ajax result by bellow code
<code>
<script type="text/javascript">
$(document).ready(function(){
$(".todayTask").click(function(){
var employee = '<?php echo trim($userID);?>';
$.ajax({
url: "ajax_call.php",
type:"POST",
data:{userID:employee},
success: function(result){
$('#taskList').html(result);
}});
});
});
</script>
</code>
Now I want to get value from radio button which stay in ajax result...
by below code but does not work...
<code>
<script type="text/javascript">
$(document).ready(function(){
$("#s").click(function(){
var status_val = $(this).val();
alert(status_val);
});
});
</script>
</code>
Since your radio buttons are loaded via jquery, you need to use on event:
$(document).ready(function(){
$('#taskList').on("click","#s", function(){
var status_val = $(this).val();
alert(status_val);
});
});
You need to also use a class ".s" instead of an ID "#s", because an ID needs to be unique, here is an example:
$('#taskList').on("click",".s", function(){
Bind your click event using on:
$("table").on("click","#s" ,function(){
var status_val = $(this).val();
alert(status_val);
});
Note: ID must me unique. So, either use classes or make sure you have unique id
I am looking for a code, which I can put inside a standard HTML href link - that, once the link is clicked, will immediately update a portion of the link in real-time.
Something like:
Example
Will at first print:
Example
And so after it being clicked once, it'll instantly change to:
Example
Anyone got anything simple up the sleeve for that?
Thanks!
First include JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
Give your link an id
<a id="link" href="http://example.com/page1/">Example</a>
Use the link in your JQuery code
$(document).ready(function() {
$(document).on("click", "#link", function() {
$(this).attr("href", "http://example.com/page1-clicked/");
});
});
edit
I you want to do the same with many links give your link a class
<a class="link" href="http://example.com/page1/">Example</a>
Then change the JQuery code to
$(document).ready(function() {
$(document).on("click", ".link", function() {
$(this).attr("href", "http://example.com/page1-clicked/");
});
});
using JQuery's one event handler to change the link only once:
$(function () {
$('a').one(function (event) {
var elem = $(this);
var before = elem.attr('href');
var after = before + '-clicked/';
elem.attr('href', after);
})
});
I have a multi level select chain, where by the value of the first select generates the options for the next select list. And within the second list some of the values will cause a div to display with another input.
My codes (below) seem to work just fine when tested on static content (ie: the second select is hard coded in the html). But when I add it with JQuery, the second level no longer triggers the .change function.
<script type="text/javascript">
$(document).ready(function() {
$dts = $("select[name='tourdes']");
$dts.change(function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$tags = $("select[name='tourcode']");
$tags.change(function() {
if ($(this).val() == "private") {
$(".prvcal").css({"visibility":"visible"});
}
});
});
</script>
I am guessing something needs to be re-initialized, but I am getting no where with my experiments.
If you're using jQuery 1.7 you'll want to use on, as both live and delegate are deprecated.
$(document).on("change", "select[name='tourcode']", function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
docs for on()
You are probably using dynamically-generated HTML elements. If that is the case, you need to use .delegate() to handle them:
$('select').delegate("[name='tourdes']", 'change', function() {
i am trying to put a pagination page into jquery. example.html?id=foo&get=23
i would like to pass the get= into the jquery script so that i can change the page within the div instead of sending the link to the having the user see example.html?id=foo&get=23, they should only see example.html?id=foo. the rest is done in jquery.
<script >
$(document).ready(function()
{
$("#data").load("page.php?ht=<?php print $id; ?>&p=1" );
$("#next").click(function(){
var pageNum = this.id;
$("#content").load("page.php?ht=<?php print $id; ?>&p=" + pageNum, Hide_Load());
});
});
<div id="data">
page1
</div>
Why not modify the anchor
$('#next').attr("href","example.html?id=45");
After every click on the page?
you need something like this:
$(document).ready(function(){
$("#next").click(function(){
$.post('your_script_to_get_values.php',
{ page: "1" },
function(data) {
$('#content').html(data);
});
});
});
Make sure you use a live click handler, and not just a click handler, because you are creating the #next element after the page loads.
$("#next").live('click', function(){ //etc.
Documentation for .live()
It matches the current selector now and in the future (i.e. if the elements are created dynamically).
The simplest way would be with a session variable.
php sends html strings to html via ajax wrapped in <p class="select"></p> tags, css reads class perfectly. javascript/jquery does not. javascript/jquery wont even parse <p onclick="function()"></p>. What am i doing wrong?
heres my php (sends data via ajax fine)
echo "<p class='select' onclick='populate();' >{$row['song_name']} </p>";
heres my css (works fine)
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
heres my javascript
method 1 jquery.
$("p .select").click(function(){
var str = $(this).val();
alert(str);
});
method 2 onclick function.
function populate()
{
alert('here')
}
neither of the two methods respond at all. Guru why is this?
$("p .select").live ( "click" , function(){
var str = $(this).text();
alert(str);
});
See
Events/live
Binds a handler to an event (like
click) for all current - and future -
matched element.
Two things:
p .select will choose <p> tags containing an element with class select. p.select selects <p class="select">.
Why not move the populate function to within the live? I suspect the jquery live (or click) removes any explicit handlers.
Try this:
$("p.select").live("click",function()
{
var str = $(this).text();
alert(str);
populate();
});
I posted a working(in Firefox) example below. I think you forgot to put the jquery method inside the onload event. Beside the other (small) bugs...
<html>
<head>
<style>
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
</style>
<script src="jquery-1.3.2.min(2).js" type="text/javascript"></script>
<script type="text/javascript">
function bodyOnLoad() {
//instead of "p .select" "p.select"
$("p.select").click(
function(){
//changed val() into text()
var str = $(this).text();
alert(str);
});
}
</script>
</head>
<body onload="bodyOnLoad()">
<p class='select'>Songname</p>
</body>
</html>