Question

我正在使用bootstrap最新版本。我动态创建了一个bootstrap模式。我给了fade_div ID的modelLink href值。但是当我点击链接按钮时它没有显示模态。请任何人告诉我的问题解决方案。我为Bootstrap Modal编写了以下代码。

    var modelLink = document.createElement('a');
    modelLink.setAttribute('role', 'button');
    modelLink.setAttribute('data-toggle', 'modal');
    modelLink.className = "btn btn-primary btn-sm";
    modelLink.innerHTML = "Display";
    modelLink.href = '#myModal';
    divElementGroup1.appendChild(modelLink);

    var file_list;
    var fade_div;
    jQuery(modelLink).on('click', function() {
        jQuery("#myModal").modal("show");
    });

    var fade_div = document.createElement('div');
    fade_div.className = "modal fade";
    fade_div.id = "myModal";
    fade_div.setAttribute('tabindex', '-1');
    fade_div.setAttribute('role', 'dialog');
    fade_div.setAttribute('aria-labelledby', 'myModalLabel');
    fade_div.setAttribute('aria-hidden', 'true');

    var model_dialog = document.createElement('div');
    fade_div.appendChild(model_dialog);
    var model_content = document.createElement('div');
    model_dialog.appendChild(model_content);

    var model_header_div = document.createElement('div');
    model_header_div.className = "model-header";
    model_content.appendChild(model_header_div);

    var top_right_close_button = document.createElement('button');
    top_right_close_button.className = "close";
    top_right_close_button.setAttribute('data-dismiss', 'modal');
    top_right_close_button.setAttribute('aria-hidden', 'true');
    top_right_close_button.innerHTML = "X";
    model_header_div.appendChild(top_right_close_button);

    var model_body = document.createElement('div');
    model_body.className = "model-body";
    model_content.appendChild(model_body);


    var model_footer_div = document.createElement('div');
    model_footer_div.className = "modal-footer";
    model_content.appendChild(model_footer_div);

    var close_button = document.createElement('button');
    close_button.className = "btn";
    close_button.setAttribute('data-dismiss', 'modal');
    close_button.setAttribute('aria-hidden', 'true');
    close_button.innerHTML = "Close";
    model_footer_div.appendChild(close_button);

先谢谢。

Answer 1

因为您正在动态创建链接，所以您需要使用事件委派：

var modelLink = document.createElement('a');

jQuery(document).on('click', modelLink, function() {
    jQuery("#myModal").modal("show");
});

Bootstrap Modal不显示

1 个答案: