javascript - 创建 jquery 函数以从另一个函数中创建的 html 运行

Question

我正在尝试利用 jquery blur在此函数内部，但无论我将代码放在哪里，它都不会被拾取。

首先，这是我原来的函数。我正在使用 sweetalert 创建一个漂亮的查找弹出框，供用户编辑记录:

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  
}

但是，当我的成本字段模糊时，我想做点什么:

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

但我不知道在我的代码中的什么位置让它发挥作用。

事实上，创建这个<td class="dropInfo"><input class="editInput" type="text" id="cost" value="'+cost+'"></input></td>的html与另一个 javascript 函数相关联是我的解决方案不起作用的原因吗？我试过把 $('#cost').blur我能想到的任何地方都有函数，比如 editLine 里面函数本身，

function editLine(data) {

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

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

以及 $(document).ready(function(){ ,

以及我的 <script> 的结尾和开头本身部分，但是 console.log永远不会触发。我该如何进行这项工作？

Answer 1

您有 2 个选择。

1. 您可以使用内联事件处理程序。

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

2. jQuery 使用“on”作为事件处理程序。

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