javascript - 打开时jquery对话框刷新页面

Question

我很困惑为什么当我点击一个按钮时:按下打开帮助功能，当对话框打开时，刷新浏览器？如果有人可以检查我的代码并告诉我我的错误，我将不胜感激。如果我点击 vidresize div，它指向 localhost 索引页面并刷新浏览器并关闭对话框。我怀疑它可能是就绪函数。但是作为一个完全的菜鸟，我会知道什么 :-)。谢谢

<script type="text/javascript">
 function help(){
    $(function() {
        $("#help").dialog({
            autoOpen: false,
            resizable: true,
            modal: true,
            title: "Action Help panel",
            width: 470,
            beforeclose: function (event, ui) {                    
                    jAlert("Thank you for using the help area\nand we hope it was of use to you.",
                                                     'Help area');                        
            },
            close: function (event, ui) {                    
            }        
        });
    });
    $("#help").dialog('open');
 }
</script>

++++++更新+++++++

<div id="help" style="display:none;">
  <div id="help2">
    <ul>
    <li>
    <h6>ADDING A USER</h6>
    <p>To add a user, simply click the 'ADD' button from the menu and enter all the details. Please complete all
        the fields. The user details will then be added to the Contacts, Company and User areas.</p>

    <p>Simply hold the left mouse button and drag
      until the column changes to your preffered size.</p>
    </li>

    <li>
    <h6>RESIZING COLUMNS</h6>
    <p>If you find that the columns are not the size you would like, you can resize them 
      by hovering the mouse over the column and a resize line will appear.</p>

    <p>Simply hold the left mouse button and drag until the column changes to your prefered size.
        We have prepared a sample video for you to follow.</p>

    <br />
     <p> 
    <ul>
      <li><a href"#">Resizing Columns Video</a></li><br />
    </ul>

    </li>
    </p>
     <div id="vidresize">Video will be shown here</div>
    <br />
    <li>
    <h6>SHOW/HIDE COLUMNS</h6>

    <p>If you find that your grid is cluttered and you may perhaps only need to view and work on a cretain field,
        you can simply hide that field. Hover your mouse over the header in the grid and a small down arrow will
        appear. Simply click the arrow and you will be presented with the fields in the grid and simply untick the
        field you wish to hide. To show a field, simply reverse the tick process. Please note, that in Internet Explorer
        it may be necessary to adjust the grid width first then the arrow will appear.</p>
    <br />
    <ul>
      <li><a href"#">Show/Hide Columns Video</a></li><br /><br />
      </ul>
    </li>

    <li>
    <h6>REORDERING COLUMNS</h6>
    <p>You have the facility if you wish to reorder the columns simply by selecting the column name
        and holding the left mouse button drag the column to where you wish and simply release the mouse button.</p>
    </li>

    <li>
    <h6>CHANGE COLUMN WIDTHS</h6>
    <p>If you find that some of the columns are too small and not showing all the data, you can resize them to amother size.
        If you hover your mouse in the line between the names, your cursor will change and then simply drag the column to the desired width.</p>
    </li>

    <li>
    <h6>SEARCHING ITEMS</h6>
    <p>By clicking the magnifying glass icon, a search box will appear and you can enter your search criteria, then
       press the enter key. All search results are displayed in the grid.</p>
    </li>

    <li>
    <h6>DELETING ITEMS</h6>

    <p>To delete an item, simply click the item you wish to delete, then confirm your selection.
        please be aware that this activity is permanent so use with caution.</p>
    </li>

    <li>
    <h6>EDITING ITEMS</h6>

    <p>If you wish to edit an entry, simply click on the row that you wish to edit and proceed to update any records that need updating.
        Then, press the update button and your update is finished. Please note, that you can only select 1 row to edit at a time.
    </p></li></ul>
  </div></div>

<script language="javascript" type="text/javascript">

            $(function() {
                $("#vidresize").hide();

            $('li a').click(function () {
                $("#vidresize").show();

            });});

</script>

Answer 1

是按钮还是链接？因为如果你有这样的东西:

<a href="something" onpress="help();">Help</a>

默认行为是点击链接。试试这个链接:

$("#theIdOfTheButton").click(function(event) {
    event.preventDefault();
    // the rest of your code that opens the dialog
}