Question

我动态追加一个元素，我为它的onFocus属性分配一个函数，但似乎函数没有被调用

这是我的剧本

function add_new()
{
    var i=$('#total').val();
    $('#multi_upload').append('<p id="p_t_to'+i+'"><input type="text" name="t_to'+i+'" id="t_to'+i+'" onFocus="setAutoComplete(p_t_to'+i+',t_to'+i+', results'+i+', <?php echo base_url();?>autocomplete/search?part=)"/></a>');
    var i = parseInt(i);
    i=(i+1);
    $('#total').val(i);

}

但现在，当我在动态创建的元素上单击鼠标时，我的意思是将焦点设置在动态文本框上，然后该函数不会被调用..我做错了什么？

setAutoComplete（）函数定义如下

// global variables
var acListTotal   =  0;
var acListCurrent = -1;
var acDelay       = 500;
var acURL         = null;
var acSearchId    = null;
var acResultsId   = null;
var acSearchField = null;
var acResultsDiv  = null;

function setAutoComplete(auto_id, field_id, results_id, get_url)
{
      alert(auto_id);

    // initialize vars
      auto  = "#" + auto_id
    acSearchId  = "#" + field_id;
    acResultsId = "#" + results_id;
    acURL       = get_url;

    // create the results div
    $(auto).append('<div id="' + results_id + '"></div>');

    // register mostly used vars
    acSearchField   = $(acSearchId);
    acResultsDiv    = $(acResultsId);

    // reposition div
    repositionResultsDiv();

    // on blur listener
    acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });

    // on key up listener
    acSearchField.keyup(function (e) {

        // get keyCode (window.event is for IE)
        var keyCode = e.keyCode || window.event.keyCode;
        var lastVal = acSearchField.val();

        // check an treat up and down arrows
        if(updownArrow(keyCode)){
            return;
        }

        // check for an ENTER or ESC
        if(keyCode == 13 || keyCode == 27){
            clearAutoComplete();
            return;
        }

        // if is text, call with delay
        setTimeout(function () {autoComplete(lastVal)}, acDelay);
    });
}

// treat the auto-complete action (delayed function)
function autoComplete(lastValue)
{
    // get the field value
    var part = acSearchField.val();

    // if it's empty clear the resuts box and return
    if(part == ''){
        clearAutoComplete();
        return;
    }

    // if it's equal the value from the time of the call, allow
    if(lastValue != part){
        return;
    }

    // get remote data as JSON
    $.getJSON(acURL + part, function(json){

        // get the total of results
        var ansLength = acListTotal = json.length;

        // if there are results populate the results div
        if(ansLength > 0){

            var newData = '';

            // create a div for each result
            for(i=0; i < ansLength; i++) {
                newData += '<div class="unselected">' + json[i] + '</div>';
            }

            // update the results div
            acResultsDiv.html(newData);
            acResultsDiv.css("display","block");

            // for all divs in results
            var divs = $(acResultsId + " > div");

            // on mouse over clean previous selected and set a new one
            divs.mouseover( function() {
                divs.each(function(){ this.className = "unselected"; });
                this.className = "selected";
            })

            // on click copy the result text to the search field and hide
            divs.click( function() {
                acSearchField.val(this.childNodes[0].nodeValue);
                clearAutoComplete();
            });

        } else {
            clearAutoComplete();
        }
    });
}

// clear auto complete box
function clearAutoComplete()
{
    acResultsDiv.html('');
    acResultsDiv.css("display","none");
}

// reposition the results div accordingly to the search field
function repositionResultsDiv()
{
    // get the field position
    var sf_pos    = acSearchField.offset();
    var sf_top    = sf_pos.top;
    var sf_left   = sf_pos.left;

    // get the field size
    var sf_height = acSearchField.height();
    var sf_width  = acSearchField.width();

    // apply the css styles - optimized for Firefox
    acResultsDiv.css("position","absolute");
    acResultsDiv.css("left", sf_left - 2);
    acResultsDiv.css("top", sf_top + sf_height + 5);
    acResultsDiv.css("width", sf_width - 2);
}


// treat up and down key strokes defining the next selected element
function updownArrow(keyCode) {
    if(keyCode == 40 || keyCode == 38){

        if(keyCode == 38){ // keyUp
            if(acListCurrent == 0 || acListCurrent == -1){
                acListCurrent = acListTotal-1;
            }else{
                acListCurrent--;
            }
        } else { // keyDown
            if(acListCurrent == acListTotal-1){
                acListCurrent = 0;
            }else {
                acListCurrent++;
            }
        }

        // loop through each result div applying the correct style
        acResultsDiv.children().each(function(i){
            if(i == acListCurrent){
                acSearchField.val(this.childNodes[0].nodeValue);
                this.className = "selected";
            } else {
                this.className = "unselected";
            }
        });

        return true;
    } else {
        // reset
        acListCurrent = -1;
        return false;
    }
}

Answer 1

在jQUery中使用.on来解决这个问题。

我想在这里你有一些语法问题。试试这个

setAutoComplete('p_t_to'+i+,'t_to'+i+, 'results'+i+',<?php echo base_url();?>autocomplete/search?part=)

通过jquery追加元素时分配函数

1 个答案: