首页 > 解决方案 > 在弹出窗口中定位尚未在 dom 中的元素

问题描述

我是一个 javascript 新手。我刚刚花了 3 个小时浏览 stackoverflow,试图强行回答看似简单的问题。老实说,我什至不确定我应该寻找什么来解决我的问题。

我有一些 javascript 用于将 google 位置地址自动完成绑定到输入,该输入已移动到一个弹出窗口,在单击按钮之前不会添加到 DOM,所以现在绑定失败。

弹出加载后,我应该如何修改 JS 以执行?

新弹出窗口的 CSS ID 为“elementor-popup-modal-97”。


function bind_autocomplete(){
    // Bind the field based on element ID
    autocomplete = new google.maps.places.Autocomplete( document.getElementById(LAA_search_field_id), {types: ['geocode']});

    autocomplete.setFields(['address_component']);
    autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    var componentForm = {
        street_number: LAA_search_field_street_number,
        route: LAA_search_field_street_name,
        locality: LAA_search_field_suburb,
        administrative_area_level_1: LAA_search_field_state,
        postal_code: LAA_search_field_postcode
      };

    var place = autocomplete.getPlace();

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i]["short_name"];
            if (addressType=="route" && LAA_strip_street_type == "yes") {
                var lastIndex = val.lastIndexOf(" ");
                val = val.substring(0, lastIndex);
            }
            document.getElementById(componentForm[addressType]).value = val;
        }
    }
}

jQuery(window).load(function(){
    bind_autocomplete();
});

我不确定我是否应该更新autocomplete = new google.maps.places.Autocomplete( document.getElementById(LAA_search_field_id), {types: ['geocode']});以某种方式定位一个 ID,即使它还没有加载(甚至可能),或者我是否应该包装bind_autocomplete();一个调用来检测是否#elementor-popup-modal-97已添加到 DOM?

我很感激任何帮助。

干杯,

杰米

标签: javascriptjquerywordpresselementor

解决方案


推荐阅读