create jquery function to run from html that's created from within another function

Question

I'm trying to utilize a jquery blur inside of this function, but no matter where I put my code, it's not getting picked up.

First, here is my original function. I'm using sweetalert to create a nice lookup pop-up box for the user to edit a record:

function editLine(data) {

    cost = data.dataset.quotecost;
    resale = data.dataset.quoteresale;
    lineID = data.dataset.lineid;

    swal({   
        title: 'Edit Record',   
        html:     
            '<table id="expand" cellpadding="5" cellspacing="0" border="0" style="margin: 0 auto;">'+                
                '<tr>'+
                    '<td class="popupDropHeader">Cost</td>'+            
                    '<td class="dropInfo"><input class="editInput" type="text" id="cost" value="'+cost+'"></input></td>'+
                    '<td class="popupDropHeader">Resale</td>'+
                    '<td class="dropInfo"><input class="editInput" type="text" id="resale" value="'+resale+'"></input></td>'+                 
                '</tr>'+                       
            '</table>',
        showCancelButton: true,
        confirmButtonText: 'Submit Changes',
        width: 1000,
        closeOnConfirm: false                                                        
    }, 
    function() {   

        var inputCost    = $('#cost').val();
        var inputResale  = $('#resale').val();  

        swal.disableButtons();   

        if(typeof lineID !== 'undefined') {
            $.ajax({
                type: 'POST',
                url: 'editRecord.php',      
                data: { inputCost:inputCost, inputResale:inputResale, lineID:lineID},        
                success:function(data){
                    setTimeout(function() {
                        swal('Data Updated!');
                    }, 1000);                         
                }
            }); //close ajax
        };      
    }); //close sub-function  
}

However, I want to do something when my cost field is blurred:

$('#cost').blur(function(){
    //code here...
});

But I don't know where in my code to put this for it to work.

Is the fact that the html that creates this <td class="dropInfo"><input class="editInput" type="text" id="cost" value="'+cost+'"></input></td> is tied to another javascript function the reason why none of my solutions are working? I've tried putting the $('#cost').blur function everywhere I can think of, like inside the editLine function itself,

function editLine(data) {

    $('#quoteExpDate').blur(function() {
        console.log("hey it worked!");      
        //code here...
    });  

    //other code that's pasted above...    
}

as well as in $(document).ready(function(){,

and also by itself at the end and beginning of my <script> sections, but the console.log never triggers. How do I make this work?

Anders · Accepted Answer · 2015-09-13 11:42:58Z

2

You have 2 choices.

You can use inline event handler.

<input class="editInput" type="text" id="cost" value="cost" onblur="costBlurFunction();">

jQuery is using "on" for event handlers.

$('body').on('blur','#cost',function(){
    //code here...
});

edited Sep 13, 2015 at 11:42

Anders

8,66310 gold badges60 silver badges101 bronze badges

answered Aug 6, 2015 at 20:01

Erdi

14010 bronze badges

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

1 Comment

Brian Powell Over a year ago

yup - I gave up trying to figure it out in jQuery and just used the inline event handler...... thank you for your help!

Collectives™ on Stack Overflow

create jquery function to run from html that's created from within another function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related