Question

我的java脚本有问题。 Modal最初工作正常，但每当我第二次点击它时，会出现2个模态，前一个和新模态。每次点击按钮都会叠加。

以下是一些图片：

以下是JavaScript

<script>
$(document).ready(function() {      
    ModalCustom = function(options) {
        var html = "<div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-hidden='true'> 
                        <div class='modal-dialog modal-lg'> 
                            <div class='modal-content'> 
                                <div class='modal-header'> 
                                    <button type='button' class='close' data-dismiss='modal'>
                                        <span aria-hidden='true'></span> 
                                    </button> 
                                    <h4 class='modal-title' id='myModalLabel'><b> Edit Faction </b>: " + options.Name + "</h4> 
                                </div>
                                <div class='modal-body'> <h4></h4> 
                                    <form action='{SITE_CMS_ROOT}?factions&submit' method='post' class='form-horizontal form-label-left'>
                                        <div class='form-group'>
                                            <label class='control-label col-md-3 col-sm-3 col-xs-3'>ID</label>
                                            <div class='col-md-6 col-sm-9 col-xs-9'>
                                                <input type='text' class='form-control' data-inputmask=''mask': '99/99/9999'' name='id' value='" + options.id + "' placeholder='" + options.id + "' readonly='readonly' />
                                                <span class='fa fa-lock form-control-feedback right' aria-hidden='true'></span>
                                            </div>
                                        </div>
                                        <div class='form-group'>
                                            <label class='control-label col-md-3 col-sm-3 col-xs-3'>Name</label>
                                            <div class='col-md-6 col-sm-9 col-xs-9'>
                                                <input type='text' class='form-control' data-inputmask=''mask' : '(999) 999-9999'' name='Name' placeholder='" + options.Name + "'>
                                                <span class='fa fa-bars form-control-feedback right' aria-hidden='true'></span>
                                            </div>
                                        </div>
                                    </form>
                                </div> 
                                <div class='modal-footer'> 
                                    <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
                                    <button type='button' class='btn btn-primary'>Save changes</button> 
                                </div> 
                            </div> 
                        </div> 
                    </div>";
        appendHtml(document.body, html);
    };

    function appendHtml(el, str) {
        var div = document.createElement('div');
            div.innerHTML = str;
        var $el = $("#something").find(".modal");
            if ($el.lenght){
                el.replaceWith(div.children[0]);
            } else {
                el.appendChild(div.children[0]);
            }   
    }
});
</script>

以下是调用JavaScript的PHP脚本

case 'FactionsList':    
            /* User Counter */
            $Query = $this->DBase('Query', array( 0 => "SELECT * FROM `factions`" ));
            while ($FACTIONS = $Query->fetch_object()) {
                $this->FACTION->FACTIONSLIST .= 
                '<tr>
                    <td width="3%"><input type="checkbox" class="flat" name="table_records"></td>
                    <td width="2%">'. $FACTIONS -> id .'</td>
                    <td>'. $FACTIONS -> Name .'</td>
                    <td width="3%" class="last">
                        <a href="#" data-toggle="modal"  data-target=".bs-example-modal-lg" onclick="new ModalCustom({
                            id: \''. $FACTIONS -> id .'\',
                            Name: \''. $FACTIONS -> Name .'\',
                        });">
                            &nbsp;<i class="fa fa-pencil"></i>
                        </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#" onclick="new TabbedNotification({
                              title: \'Notification\',
                              text: \'Faction <b>'. $FACTIONS -> Name .'</b> successfully deleted!, page will be updated shortly.\',
                              type: \'error\',
                              sound: true
                        });">
                              <i class="fa fa-trash-o"></i>
                        </a>
                    </td>
                </tr>';
            }
            break;

Answer 1

问题解决了。

function appendHtml(el, str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    $el = el;
    $(el).find(".modal");

    if ($el.lenght){
        var cnt = $(div.children[0]);
        $(".modal").replaceWith(cnt);
    } else {
        el.appendChild(div.children[0]);
        $el.lenght = 1;
    }
}

PHP的JavaScript模式

1 个答案: