javascript - 在以下场景中如何在 jQuery 对话框上使用创建事件？

Question

我有以下对话框弹出 HTML，该对话框最初在页面加载时隐藏(查看 div 中的 style="display:none;" 行):

<div id="searchPopContent" class="c-popup" style="display:none;">
      <div id="pop-up">
      <div class="error_msg" id="report_error" style="text-align:center; margin-top:5px;">

        </div>
        <div class="clear"></div>
        <form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="question_issue.php">
          <input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
          <input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
          <input type="hidden" name="op" id="op" value="question_issue"/>
          <input type="hidden" name="question_id" id="question_id"/>

          <table class="trnsction_details" width="100%" cellpadding="5">
            <tbody>    
              <tr>
                <td></td>
                <td>
                  <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td> 
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>             
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>          
              </tr>
              <tr>
                <td></td>
                <td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
              </tr>
              <tr>
                <td></td>
                <td><input type="submit" name="submit" value="Submit" class="report_question_issue" class="buttonin"/></td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>

我想动态设置 id="question_id"的隐藏输入类型的值。经过大量研究后，我发现我必须使用 jQUery UI 对话框插件的 create() 方法来动态设置 UI 对话框中的隐藏字段值。我尝试在 jquery 对话框调用中调用 create() 事件，但无法设置该值。有人可以在这方面帮助我吗？以下是我尝试使用 create() 事件的代码。

$(document).on("click","a[class='que_issue']", function (e) {
var hypertext = this.innerHTML;
  var que_id = hypertext.substring(3);

  //document.getElementById("question_id").value = que_id;
  //$("#question_id").val(str);

    var data = $('#searchPopContent').html();

    var title = "Question issue";
    var dialog_title   = title; 
    var dialog_message = data; 
            var $dialog = $("<div class='view_result'></div>")
     .html(dialog_message)
     .dialog({
           autoOpen: false,
           modal:true,
           title: dialog_title,
           width: 400,                     
           close:{
           },
           create: function() {
       $("#question_id").val(que_id);
    }
     });
     $dialog.dialog('open');

    return false;
});

上述代码的 Firebug 控制台中也没有错误。

Answer 1

我修改了你的JS:http://jsfiddle.net/JyPLc/1/ ，它有效。

$(document).ready(function(){    
    $("#searchPopContent").dialog({
       autoOpen: false,
       modal:true,
       title: "Question issue",
       width: 400, 
       close:{
       }   
     });
});

$("a.que_issue").on("click", function (e) {
    var hypertext = this.innerHTML;
    var que_id = hypertext.substring(3);
    var title = "Question issue";

    $("#question_id").val(que_id);
    $("#qns_id").val(que_id); //this is just to show it works, can delete it
    $("#searchPopContent").dialog('open');

    return false;
});

您应该先修改HTML，然后调用dialog()来显示到弹出窗口。