How to make javascript in innerHTML work after an AJAX

Question

I'm making a voting system. After user click those button(div),an ajax will be called to pass data to another page doing SQL to insert session id, vote value, vote id and showing the new total
here is my ajax

$('.like').on('click', function(){
    var voteclass=2;
    var vote_id=$(this).parent().attr("id");
    var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
    $.ajax({
    url:"insert.php",
    cache:0,
    data:poststr,
    success:function(result){
    $('#'vote_id).html(result);}  });   });

After ajax, insert.php do the SQL and show the result which is the same voting div content as fontpage but with new total value.
My question is that I cannot vote again without refresh the whole page. Is it means that innerHTML cannot load the script within the head element of outer ( I don't know what term is ) page? and how can I solve it?

Two questions: is there a reason you are using 'bind' instead of 'on'? and using native javascript: document.getElementById(...).innerHtml = ... instead of $('#'+vote_id).html(result)? — JasonWilczak
– JasonWilczak, Commented Mar 9, 2015 at 12:48
thx for replying!! Jason Q1:I have change that to 'on' Q2:I tried what you mentioned but it still doesnt work after 2 clicks — EEEEEric
– EEEEEric, Commented Mar 9, 2015 at 13:49
I realized that why I can only click twice is that .html() will strip out my original html is there any way to avoid that? — EEEEEric
– EEEEEric, Commented Mar 9, 2015 at 14:06
here is a jsfiddle of what I am talking about: jsfiddle.net/jasonwilczak/rtmo4093/33 — JasonWilczak
– JasonWilczak, Commented Mar 9, 2015 at 19:34

JasonWilczak · Accepted Answer · 2015-03-11 19:04:00Z

1

I figured I would just add an answer: Working Fiddle

Javascript:

I wrapped the entire logic in a document.ready to make sure the DOM is fully loaded, which I assume you are doing also.

I also used 'on' instead of 'bind' since that is the jQuery preferred method with their current library.

My ajax call is a mock ajax call for jsFiddle, but you can just replace the url with your index.php.

In the success i used $('.'+vote_id) because you are get the 'class' of the parent, so you need a '.' instead of a '#' in the jquery selector. If I were you i would change the variable 'vote_id' to be called 'parentVoteClass'.

Finally, i used 'append' because you did not want to lose the existing html in the parent tag. This will add the value from result to the end of the existing html in the parent element. If you use prepend(result) it will put it first and using .html(result) will replace it.

 $(document).ready(function() {
        $('.like').on('click', function(){
            var vote_teacher = 1;
        var voteclass = 2;
        var vote_id = $(this).parent().attr("class");
        var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: poststr,
            cache: false,
            success: function(result) {
                var someDatafromResult = "my stuff";
                $('.'+vote_id).append(someDatafromResult);
            }
        });
    });
});

HTML:

<div id="parent" class="parentClass">
<a href="#" class="like">Vote!</a>    
</div>

UPDATE:

I modified your fiddle: Modified Fiddle

The major change is here:

function main(){
$('#something').on('click','.agree', function(){...code hidden...}

this allows you to bind the event on the parent element, instead of '#something' you could use document as well. Now, if you html with the 'agree' class gets replaced or blown out, the even still lives on.

I faked the successful php return here:

success:function(result){            
           $('#'+des_id+'').html('<li>text    <span class="votes_type ">    <a href="#!" class="agree">'+voteNumber+'<img src="png"></a>    <a href="#!" class="disagree">disagreenumber<img src="png"></a> </span>    </li>   ');
           ;}

I used some inline stringed html to fake an html return result and then used the variable 'voteNumber' which gets incremented with each click to show that it does indeed change and continue to work.

edited Mar 11, 2015 at 19:04

answered Mar 9, 2015 at 19:46

JasonWilczak

2,4132 gold badges22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

EEEEEric Over a year ago

thx for guiding me step by step !! I take your advice and delete the <div></div> in my index.php so that the level of parent and child would not change to disable my javascript, but now the problem I can only click twice with the value of vote and vote_id right after that the javascript responses nothing to my clicking

JasonWilczak Over a year ago

As for the HTML, I just made something up that I thought would mimic your situation. What would be really great is if you could create a fiddle at JSFiddle.net. You can use my fiddle and modify it or create your own. That could help shed some light on what you are trying to do.

JasonWilczak Over a year ago

php isn't my native language, but let me take a look and get back to you

JasonWilczak Over a year ago

I modified the fiddle a bit: jsfiddle.net/jasonwilczak/09xr8Lc4/17 I think this will help you. If you update the html then that event binding goes away $('.agree').on('click'...). So, if you are going to replace that section you need to bind on the parent, in your example, i used the 'something' id on the parent div. You can easily use document as well. I removed the php specific items so that fiddle would run correctly.

EEEEEric Over a year ago

Thx you so much for spending such a long time on explaining those details to me. I do appreciate that !!!! It turn out that I just have to add parent() like $('#'des_id'').parent().html(result) to resolve my problem. Stackoverflow should invent a ''thank you x 100 times'' button. Can I give any point or something?

|

n-dru · Accepted Answer · 2015-03-09 13:16:22Z

1

You need to use on() function, change:

$('.like').bind('click', function(){

to

$('body').on('click','.like', function(){

And of course I assume that your script which you show us snippet of, is wrapped in:

$(document).ready(function(){
   ...
});

Also change this:

var vote_id=$(this).parent().attr("class");

to:

var vote_id=$(this).parent().attr("id");

edited Mar 9, 2015 at 13:16

answered Mar 9, 2015 at 12:50

n-dru

9,4402 gold badges31 silver badges43 bronze badges

3 Comments

EEEEEric Over a year ago

thxs for replying!!! but my problem exists even with that change, I still cannot vote after voting

n-dru Over a year ago

I can see that - I updated my answer - you take class and afterwards you call getElementById even though you have class, not id

EEEEEric Over a year ago

thxs for guiding me step by step. I didnt notice there are so many mistakes in snippet. But I did what you mentioned right in my original script

augustoccesar · Accepted Answer · 2015-03-09 13:25:24Z

0

try this one..

 $('.like').on('click', function(){
        var voteclass=2;
        var vote_id=$(this).parent().attr("class");
        var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
        $.ajax({
            url:"insert.php",
            cache:0,
            data:poststr,
            success:function(result){
                $('#vote_id').html(result);
            }
        });  
 });

edited Mar 9, 2015 at 13:25

augustoccesar

6669 silver badges30 bronze badges

answered Mar 9, 2015 at 12:50

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to make javascript in innerHTML work after an AJAX

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related