1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

javascript function lost when page was loaded through ajax

Discussion in 'JavaScript' started by neilfurry, Dec 20, 2017.

  1. #1
    Hi Mate,

    I hope somebody could help me on this problem,

    i have a page which is loaded via ajax.
    SEMrush
    $.ajax({
    type: "POST",
    url: "quote.php",
    data: 'cl=' + client + '&quote=' + quote,
    success: function(data) {
    $("#tabs-3").html(data);

    }
    });

    but when data is loaded to tabs-3 which contains HTML and Javascript code, the Javascript functions gets lost.

    for instance, data returns the following HTML code.

    <button class='add'>Add</button>

    and i have this loaded on page load

    $('.add').on('click',function(){
    ///my code for adding here...
    });

    it doesnt trigger the add then button with the class='add' was loaded from the ajax.

    is there any work around on this problem?

    Thank you
     
    neilfurry, Dec 20, 2017 IP
    SEMrush
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    519
    Likes Received:
    47
    Best Answers:
    23
    Trophy Points:
    130
    #2
    Try to hook this listener on parent of button.class element, such as #tabs-3 which will not be changed by ajax. If I'm not mistaken, this is called delegated event in jQuery. Ref: https://api.jquery.com/on/
    $('#tabs-3').on('click', '.add', function(){
    ///my code for adding here...
    });
    Code (JavaScript):
     
    hdewantara, Dec 20, 2017 IP
    sarahk likes this.
  3. neilfurry

    neilfurry Active Member

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    63
    #3
    Im not clicking tabs-3, it is a tab... so when that tabs-3 is loaded with HTML page fetched from url: "quote.php",

    the id or class which has the click events, lost its functionality.
     
    neilfurry, Dec 20, 2017 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    27,998
    Likes Received:
    4,345
    Best Answers:
    123
    Trophy Points:
    665
    #4
    can you create a javascript jsfiddle for us to see
    what you've set up sounds ok

    I'd be trying @hdewantara's idea too if #tabs-3 is the whole area and not just the bit at the top.
     
    sarahk, Dec 20, 2017 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    754
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    ketting00, Dec 21, 2017 IP
  6. donross

    donross Active Member

    Messages:
    90
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #6
    Why not just attach the click event after success of your ajax call.
     
    donross, Dec 25, 2017 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,646
    Likes Received:
    1,976
    Best Answers:
    250
    Trophy Points:
    515
    #7
    This might be a stupid question on my part, but is your script providing that functionality inside <script> INSIDE #tabs-3? If so jquery's (stupid malfing dumbass innerHTML style) .html method might be overwriting the scripting!

    Though a more likely answer is that you are trying to add the event BEFORE the element you are targeting even exists. If you do this:

    $('.add').on('click',function(){

    BEFORE your ajax handler ever even runs, OF COURSE it's not attached. It didn't exist yet.

    ANOTHER reason I keep telling people NOT to use that jQuery garbage. It doesn't even teach you load order properly. ONLY thing you can learn from it is how NOT to write JavaScript!
     
    deathshadow, Jan 6, 2018 IP