Question

我有一个网页，其中点击图标（字体真棒书）应该显示文本段落。问题是它没有。如果＆＃34; span.fa-book＆＃34;用作分配给变量＆＃34; ws_story_dialog＆＃34;的jQuery中的选择器，效果是从页面中删除书籍图标。同样，＆＃34; div.ws_btn_group＆＃34;删除分组的书和右箭头图标，＆＃34; div＃ws_title＆＃34;页面标题和＆＃34; div＃word_set＆＃34;整个页面。此外，从＆＃34; ws_btn_group＆＃34;中删除书籍图标，并将其放置在其他地方，例如。＆＃34; word_set＆＃34;旁边标签，没有效果。但是，如果选择器是空的＆＃34;＆＃34;然后单击书籍图标将显示帮助警报但不显示对话框，这表示问题出现在对话框配置代码中。最后，如果＆＃34; span＃ws_title_text＆＃34;使用了选择器，书籍图标部分隐藏但单击时对话框显示确定。使用Firebug进行检查显示正在删除Word Set周围的html。 HTML：

<div id="word_set">
  <div id="ws_title"><span id="ws_title_text">Word Set 1</span>
        <div class="ws_btn_group">
         <a class="btn"><span class="fa fa-book fa_book_ws"></span></a>         
          <a class="btn" href="/index.php/courses/word-set-tests/word-set-tests-1-10/word-set-test"><span class="fa fa-arrow-circle-right fa_arrow_circle_right_ws"></span></a> 
       </div> 
    </div>
  <div id="ws_dialog"><div id="wsd_text"></div></div> 
   <div id="ws_centering">   
    <div id="left_col"> 
      <p class="word_set">1<span class="color_up audio" id="b1e01">the</span><span class="color_up audio" id="b1t01">คำนำหน้านามเจาะจง </span>
    ...

使用Javascript：

jQuery(document).ready(function () {
    var ws_story_dlog =  jQuery("").dialog({
      autoOpen: false,
      modal: true,
      resizable: false,
      draggable: false,
      dialogClass: "",
      show: "slide",
      height: 400,
     width: 600,
    create: function() {
            jQuery(this).parents(".ui-dialog")
            .css("border", "0.1em solid #000093")
            .css("background", "#ECE6FF")
            .css("border-radius", "3%")
            .find(".ui-dialog-content")
            .css("font-family", "verdana")
            .css("font-size", "1em")
            .css("font-style", "normal")
            .css("color", "#1901B2")
            .css("padding-top", "15px")
            .find(".ui-dialog-header")
            .css("display","none");
        }
    });    
  jQuery("div#word_set").on("click", "span.fa-book", function(evnt) {   //"span.fa-book"
     alert("hello");
    ws_story_dlog.dialog("open");
    evnt.stopPropagation();
    jQuery("#ui-dialog-title-dialog").hide(); 
    jQuery(".ui-dialog-titlebar").removeClass('ui-widget-header'); 
    var ws_story_html = '<div class="ws_story"><p id="story_title_ws1" class="ws_story_title">This is a story using some of the words from Word Set 1</p><p>Please read and listen carefully</p><p>thai</p><p  id="story_ws1"  class="ws_story">Sed ut perspiciatis...</p><span class="fa fa-volume-up fa_volume_ws"></span></div>';
    ws_story_dlog.html(ws_story_html);
  });
});

谷歌搜索没有显示任何信息，但是这个 - jQuery ui dialog removes div - 似乎是指类似的问题。那么这里发生了什么？为什么jquery对话框删除html？任何帮助将非常感激。

jQuery UI Dialog删除html

0 个答案: