javascript - 为什么我的 Jquery 事件不会在 focusout() 上触发？

Question

我正在尝试创建一种简洁的方式来编辑页面上的文本。当我双击带有 class="textbox_aanpassen" 的 div 时，它需要将 div 更改为带有 文本的文本区域code>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 的新元素。要解决此问题，请使用 event delegation ，从新添加的项目冒泡到 DOM 中的某个点，当 jQuery 在页面加载时运行时就在那里。许多人使用 document 作为捕获冒泡事件的地方，但没有必要一路向上遍历 DOM 树。理想you should delegate to the nearest parent existing at the time of page load.