Question

所以我有一个就地编辑功能，需要在元素失去焦点时保存新值。问题是这些是表中的元素，因此每个元素都有元素id，后跟数据库中的id，这就是为什么我不能使用$('#id').on('event', function(){}的原因。

元素看起来像这样：

<td>
<div id="quant<?php echo $id_product; ?>" 
onclick="live_update('<?php echo $id_product; ?>')">

     <?php echo $quantity;?>

</div>
</td>

并且js看起来像这样：

function live_update(id){

    var quantity = $('#quant'+id).text().trim();

    $('#quant'+id).html('');
    $('<input></input>')
        .attr({
            'type': 'text',
            'name': 'name_quant'+id,
            'id': 'id_quant'+id,
            'size': '5',
            'value': quantity,
            'minlength' : '1',
            'maxlength' : 4
        })
        .appendTo('#quant'+id);
    $('#id_quant'+id).focus();
}

到目前为止一切顺利，我现在需要在新生成的输入失去焦点时更新该特定元素，因此我不仅要传递它的html id，还要传递它的数据库ID所以我不能只使用$('#id_quant').on('blur', function(){}，因为它不知道要听的表中的元素。

所以我认为当新输入失去焦点时我会调用另一个函数，但是我不确定我是否可以这样做，而且我不知道语法是怎样的。在我看来，它看起来像这样：

if($('#id_quant'+id).blur){ function ajax_update(id) }

或

if($(blur('#id_quant'+id))){ function ajax_update(id) }

我不确定我能做到这一点。

Answer 1

将类和data-id属性应用于动态元素

function live_update(id){

    var quantity = $('#quant'+id).text().trim();

    $('#quant'+id).html('');
    $('<input></input>')
        .attr({
            'type': 'text',
            'name': 'name_quant'+id,
            'id': 'id_quant'+id,
            'size': '5',
            'value': quantity,
            'minlength' : '1',
            'maxlength' : 4,
            'data-id', id // here
        })
        .addClass('inline-editor') // and here
        .appendTo('#quant'+id);
    $('#id_quant'+id).focus();
}

这些（动态）模糊这些项目，并读取内部的ID - 允许您进行ajax调用

$(document).on('blur','.inline-editor', function(){
    var id = $(this).data('id');
    // make ajax call
    ajax_update(id);
}

我可以在if语句中调整特定的js事件吗？

1 个答案: