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

Question

我正在尝试一种干净的方法来编辑页面上的文本。 当我双击一个div与class="textbox_aanpassen"它需要的改变div与文本到文本区域div在里面。

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

我想这与我首先创建事件处理程序有关，然后通过DOM更改来更改HTML以便有一个文本区域可以触发事件。

这是我的代码：

//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');
});

以及PHP生成的原始HTML ：

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中的新元素。 为了解决此问题，请使用事件委托 ，当jQuery在页面加载时运行时，将事件从新添加的项目冒泡到DOM中的某个点。 许多人将document用作捕获冒泡事件的地方，但是并不需要一直走到DOM树上。 理想情况下， 您应该委派给页面加载时存在的最接近的父级。