javascript - Can't bind script to new elements in the DOM -

javascript - Can't bind script to new elements in the DOM -

so i've working on while, still can't seem figure out.

i have page here: http://taste.fourseasons.com/ingredients/

the show more button @ bottom calls posts on page next script:

$("a.view-more").bind('click',function(event){ event.preventdefault(); if($('.post-holder').hasclass('ingredients')) { posttype = 'ingredient'; } if($('.post-holder').hasclass('recipe')) { posttype = 'recipe'; } if($('.post-holder').hasclass('cmed')) { posttype = 'cmed'; } filter = 'none'; moreposts(posttype,filter); });

and alternative allow people vote works this:

$.post('http://taste.fourseasons.com/wp-admin/admin-ajax.php', data, function(response){ if(response!="-1") { el.find('.vote-sm').removeclass('vote-sm').addclass('unvote-sm'); el.find('.vote-text').html("voted"); el.unbind("click"); if(response!="null") { el.find(".vote-count").html(response); } var cookie = getcookie("better_votes_"+postid); if(!cookie) { var newcookie = postid; } else { var newcookie = postid; } setcookie("better_votes_"+postid, newcookie, 365); } else { } }); homecoming false; });

but when user clicks show more , elements added dom, vote options isn't working new elements. assumed add together them together:

$("a.view-more").bind('click',function(event){ event.preventdefault(); if($('.post-holder').hasclass('ingredients')) { posttype = 'ingredient'; } if($('.post-holder').hasclass('recipe')) { posttype = 'recipe'; } if($('.post-holder').hasclass('cmed')) { posttype = 'cmed'; } filter = 'none'; moreposts(posttype,filter); $(".vote").bind('click',function(event) { event.preventdefault(); postid = $(this).attr('data-post'); var el = $(this); //el.html('<span id="loader"></span>'); var nonce = $("input#voting_nonce_"+postid).val(); var info = { action: 'add_votes_options', nonce: nonce, postid: postid, ip: '66.252.149.82' }; $.post('http://taste.fourseasons.com/wp-admin/admin-ajax.php', data, function(response){ if(response!="-1") { el.find('.vote-sm').removeclass('vote-sm').addclass('unvote-sm'); el.find('.vote-text').html("voted"); el.unbind("click"); if(response!="null") { el.find(".vote-count").html(response); } var cookie = getcookie("better_votes_"+postid); if(!cookie) { var newcookie = postid; } else { var newcookie = postid; } setcookie("better_votes_"+postid, newcookie, 365); } else { } }); homecoming false; }); });

but doesn't seem work , creates scenario adds 2 votes sum instead of one, every time vote.

thanks help.

this code wp-function page:

function add_votes_options() { $postid = $_post['postid']; $ip = $_post['ip']; if (!wp_verify_nonce($_post['nonce'], 'voting_nonce_'.$postid)) return; $voter_ips = get_post_meta($postid, "voter_ips", true); if(!empty($voter_ips) && in_array($ip, $voter_ips)) { echo "null"; die(0); } else { $voter_ips[] = $ip; update_post_meta($postid, "voter_ips", $voter_ips); } $current_votes = get_post_meta($postid, "votes", true); $new_votes = intval($current_votes) + 1; update_post_meta($postid, "votes", $new_votes); $return = $new_votes>1 ? $new_votes : $new_votes; echo $return; die(0); }

you've run mutual issue event binding.

$("a.view-more").bind('click',function(event){

the above line of code wrote attaches event listener dom elements available @ time. why new elements added dom not respond event; because don't have event listener attached.

to work around can utilize called event delegation. works attaching event parent of dom elements wanted hear event on. can work out kid event started on when event propagates parent.

jquery makes easy do. can utilize delegate() method suggest utilize on() method method handles event operations in jquery. others such click(), mouseover() , bind() aliases of on()

anyway, delegate event need specify selector parent event attach to, , selector elements interested in. line of code this:

$("body").on('click', "a.view-more", function(event){

you should utilize other body example.

further reading: http://api.jquery.com/on/

javascript ajax bind