Question

我正在尝试以干净的方式编辑页面上的文本。当我双击div并class="textbox_aanpassen"时，需要将div更改为文本区域，其中包含div的文本。

然后，当用户编辑textarea中的文本并离开它时，我想触发事件并通过ajax将textarea的内容保存在数据库中。但我的focusout()事件不会发生。

我认为它与我首先创建事件处理程序有关，然后通过DOM更改我更改了HTML，以便有一个textarea来触发事件。

这是我的代码：

//Edit text op de site
$('.textbox').dblclick(function(event) {
    //Haal de benodigde id's op
    var id = event.target.id;
    var db_id = event.target.id.replace( /^\D+/g, '');

    //Haal de contents van tussen de tags op
    var tekst = $('#'+id).html();

    //Replace de text met een textbox waarin de tekst wordt weergegeven
    $('#'+id).replaceWith('<div id="text_' + db_id + '" class="textbox"><textarea id="textbox_aanpassen_' + db_id + '" class="textbox_aanpassen" maxlength="500"></textarea></div>');

    $('.textbox_aanpassen').val(tekst);

});

$('.textbox_aanpassen').focusout( function(event){
    var id = event.target.id;
    var db_id = event.target.id.replace( /^\D+/g, '');

    console.log('test');
});

由HTML生成的原始PHP：

foreach($img as $key => $value){    
                $content .= '<div class="picture" id="'.$value['id'].'" style="background-image: url(../Storage/portfolio/'.$value['pic'].'); background-position: center;">';
                    $content .= '<div class="pencil" id="'.$value['id'].'">';
                        $content .= '<i id="'.$value['id'].'" class="fa fa-pencil fa-4x"></i>';
                    $content .= '</div>';
                    $content .= '<div class="slider">';
                        $content .= substr($value['titel'], 0, 12).' | '.$value['afmetingen'];
                    $content .= '</div>';
                $content .= '</div>';

            if($key == 2){
                $content .= '<div id="text_'.$text[0]["id"].'" class="textbox">';
                    $content .= $text[0]["text"];
                $content .= '</div>';
            }
            else if($key == 8){
                $content .= '<div id="text_"'.$text[1]["id"].'" class="textbox">';
                    $content .= $text[1]["text"];
                $content .= '</div>';
            }   
        }

Answer 1

因为DOM是动态更改的，请使用$(document).on('focusout', '.textbox_aanpassen', function(event){....

jQuery在运行时只知道页面中的元素，因此jQuery无法识别动态添加到DOM的新元素。要解决这个问题，请使用event delegation，当jQuery在页面加载时运行时，将新添加的项目中的事件冒泡到DOM中的某个点。许多人使用document作为捕捉起泡事件的地方，但是在DOM树上一路走来都没有必要。理想情况下you should delegate to the nearest parent existing at the time of page load.

为什么我的Jquery事件不会在focusout（）上触发？

1 个答案: