Call a function outside AJAX when I click button inside the ajax response

Question

I'm really stuck with this. How to call a function from outside AJAX when I click a button inside the AJAX response ?

The tableData as I marked with the number 1 will display after I click a category, and then if I click the <td id="mapel-desc-name".... on the number 1 which will display in the table, it will call the code that I marked with number 2. How can I do it without copy the code on number 2 in the ajax on number 1 ?

Thanks

    $("[id=mapel-desc-nav]").on('click', function(){
        var kelompok = $(this).attr("data-desc-id");
        var tableData;

        $("[id=mapel-desc-nav]").removeClass('active');
        $(this).addClass('active');

        $.ajax({
            url: "{{ url('/getmapelkel') }}",
            type: 'POST',
            data: "_token={{ csrf_token() }}&"+"kelompok="+kelompok,
            success: function(response){
                if(response){
                    if(!response.length){
                        tableData = '<tr><td>1</td><td>No Data</td></tr>';
                        $('#desc-mapel-list').html(tableData);
                    }else{
                        $.each(response, function(index, data) {
              /* Number 1*/   tableData += '<tr><td>'+ (index+1) +'</td><td id="mapel-desc-name" data-mapel-id="'+data.kodemp+'">'+data.namamp+'</td></tr>';
                        });
                        $('#desc-mapel-list').html(tableData);
                    }
                }else{
                    alert('Something wrong happen.');

                }
            }
        });

    });

// Number 2
    $("[id=mapel-desc-name]").on('click', function(){
        var id = $(this).attr("data-mapel-id");
        var tableData;

        $("[id=mapel-desc-name]").removeClass('active');
        $(this).addClass('active');

        $.ajax({
            url: "{{ url('/getmapeldesc') }}",
            type: 'POST',
            data: "_token={{ csrf_token() }}&"+"id="+id,
            success: function (response) {
                if(response){
                    $('textarea#pengA').html(response[0].desc.pengA);
                    $('textarea#pengAmin').html(response[0].desc.pengAmin);
                    $('textarea#pengBplus').html(response[0].desc.pengBplus);
                    $('textarea#pengB').html(response[0].desc.pengB);
                    $('textarea#pengBmin').html(response[0].desc.pengBmin);
                    $('textarea#pengCplus').html(response[0].desc.pengCplus);
                    $('textarea#pengC').html(response[0].desc.pengC);
                    $('textarea#pengCmin').html(response[0].desc.pengCmin);
                    $('textarea#pengDplus').html(response[0].desc.pengDplus);
                    $('textarea#pengD').html(response[0].desc.pengD);
                    $('textarea#prkA').html(response[0].desc.prkA);
                    $('textarea#prkAmin').html(response[0].desc.prkAmin);
                    $('textarea#prkBplus').html(response[0].desc.prkBplus);
                    $('textarea#prkB').html(response[0].desc.prkB);
                    $('textarea#prkBmin').html(response[0].desc.prkBmin);
                    $('textarea#prkCplus').html(response[0].desc.prkCplus);
                    $('textarea#prkC').html(response[0].desc.prkC);
                    $('textarea#prkCmin').html(response[0].desc.prkCmin);
                    $('textarea#prkDplus').html(response[0].desc.prkDplus);
                    $('textarea#prkD').html(response[0].desc.prkD);
                    $('textarea#skpSB').html(response[0].desc.skpSB);
                    $('textarea#skpB').html(response[0].desc.skpB);
                    $('textarea#skpC').html(response[0].desc.skpC);
                    $('textarea#skpK').html(response[0].desc.skpK);

                    $('#nama-mapel').html(response[0].mapel.namamp);
                    $('[data-opt-descid=only]').html(response[0].mapel.namamp);
                    $('[data-opt-descid=only]').val(response[0].mapel.kodemp);
                    $('[data-opt-descid=kel]').html("Semua kelompok "+response[0].mapel.kel);
                    $('[data-opt-descid=kel]').val(response[0].mapel.kel);
                }else{
                    alert('Something wrong happen.');

                }
            }
        });

    });

Can you please replace the image with code? It is much easier for people to try and reconstruct your issue copying and pasting code, rather than reading it from an image. — Tushar, Jul 11 '16 at 15:24
Pictures of code are useless. Code is text. edit your question and copy/paste the TEXT here. — Marc B, Jul 11 '16 at 15:25
First thing to understand is you aren't clicking something that's inside the ajax response, you're clicking something that is on the page now that wasn't on the page before. So, you either need to bind the event to the element when you add it to the page, or, better, bind the event to a parent of the element that doesn't change and take advantage of event bubbling (this is referred to as event delegation) http://api.jquery.com/on — Kevin B, Jul 11 '16 at 15:29
Here's a better dupe: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Kevin B, Jul 11 '16 at 15:34

Call a function outside AJAX when I click button inside the ajax response

0 Answers0