Question

我是JQuery和JQueryUI的新手，我在项目中遇到了.button()和.buttonset()的问题。

当我按照JQueryUI页面上的示例时，一切正常。然而，我的页面正在创建按钮作为一项功能，创建后按钮文本显示但按钮不可点击。

以下是源链接：http://mdihosting.com/5/Projects/form/test1.html

在下面的源代码中附加后 - $('#epcf-wrap').buttonset(); - 不会产生可点击的按钮。

我也试过$('#epcf-wrap').buttonset('refresh');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/blitzer/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.ui.selectmenu.css" />
<script type="text/javascript">
$(document).ready(function(){
    $('input:checkbox').button();
                $.ajax({
            type: "GET",
            url: "xml/categories.xml",
            dataType: "xml",
            success: function(xml) {
                var select = $('#vendorcat');
                $(xml).find('Cat').each(function(){
                var title = $(this).attr('name');
                select.append("<option class='vendorcat' value='"+title+"'>"+title+"</option>");
                $('#vendorcat').selectmenu();
                });     
            }
        });

   $("#about").dialog({
    resizable: true,
    autoOpen:false,
    modal: true,
    width:400,
    height:400,
    buttons: {
    'Continue': function() {
    $(this).dialog('close');
    alert('You clicked continue');
    }, // end continue button
    Cancel: function() {
    $(this).dialog('close');
    } //end cancel button
    }//end buttons

    });//end dialog
    $('#results').hide();
    $('#btnOpen').click(function(){
    $('#about').dialog('open');
    }); //end click handler

});

</script>

<script type="text/javascript"> //onchange1 - Build Category Dropdown
 //Going for the single function length world record
 //Open categories.xml and find the node based upon the passed variable catname - Category Name
 //If the Category Name is equal to the argument passed build the variables, build the array, and output
function onchange1(catname){
    $.ajax({
            type: "GET",
            url: "xml/categories.xml",
            dataType: "xml",
            success: function(xml) {
                var table = $('<table>', {id:'opttable', align:'left'});
                tr = $('<tr>').appendTo(table); // create TR and append to TABLE
                td = $('<td>').appendTo(tr);    // create TD and append to TR
                // iterate all children of the current Category
                $(xml).find('Cat[name="' + catname + '"]').children().each(function() {
                    d = $(this)
                    if (d.text() === 'TRUE') {
                        $('<input>', {
                        className: 'checkbox',
                        type: 'checkbox',
                        id: d.attr('id'),
                        name: d.attr('name'),
                        checked: 'checked'
                        }).appendTo(td);
                    }
                    else {
                        $('<input>', {
                        className: 'checkbox',
                        type: 'checkbox',
                        id: d.attr('id'),
                        name: d.attr('name')
                        }).appendTo(td);
                    }
                    // create LABEL with the id attribute of the current
                    //   child of Cat and append to TD
                    $('<label>' + d.attr('name') + '</label>', { for:d.attr('id').toLowerCase() })
                                                .appendTo(td);
                    $('<br />').appendTo(td); // create BR element and append to TD
                });
                $('#epcf-wrap').empty().append(table);  // Append the table to its container
                $('#epcf-wrap').buttonset();//This doesn't work
            }
    });
}



 </script>
<script type="text/javascript"> //Form Submitted
function formsubmitted(){
    var resultsArr = []
    resultsArr += "<table><tr><td>";
    resultsArr += "Name: " + $("input[name='name']").val();
    resultsArr += "</td></tr><tr><td>";
    resultsArr += "Email: " + $("input[name='email']").val();
    resultsArr += "</td></tr></table>"

    $('#results').empty().append(resultsArr).show();
    $('#content').hide();
}
</script>

</head>
<style>
    span.reference{
        position:fixed;
        right:5px;
        top:5px;
        font-size:10px;
        text-shadow:1px 1px 1px #fff;
    }
    span.reference a{
        color:#555;
        text-decoration:none;
        text-transform:uppercase;
    }
    span.reference a:hover{
        color:#000;

    }
    h1{
        color:#ccc;
        font-size:36px;
        text-shadow:1px 1px 1px #fff;
        padding:20px;
    }
</style>
<body>
    <div>
        <span class="reference">

            <a href="javascript:modalbox();">Version popup could go here</a>
    <input type="button" id="btnOpen" value="Open">
        </span>
    </div>
    <div id="content">
        <h1>VRACC</h1>
        <div id="wrapper">
            <div id="steps">

                <form id="formElem" name="formElem" action="" method="post">
                    <fieldset class="step">
                        <legend>Vendor Details</legend>
                        <p>
                            <label for="vendorcat">Vendor Category</label>
                            <select id="vendorcat" name="vendorcat" onChange="onchange1((this).options[this.selectedIndex].value);">
                            </select>
                        <legend>Enterprise Processes</legend>

            <input type="checkbox" id="check1" /><label for="check1">Some Checkbox</label>
            <div id="epcf-wrap" class="epcf-wrap">
            </div>
                    </fieldset>

                </form>
            </div>
            <div id="navigation" style="display:none;">
                <ul>

                    <li>
                        <a href="#">Vendor Details</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

</body>

Answer 1

您需要在与for的{{1}}对应的label代码中添加id属性。无论出于何种原因，他们添加input属性的方式似乎不起作用。并删除for。除非它们符合案例，否则它将无效。

也许你只需要toLowerCase()之后的空格：

for

但是，如果它仍然不起作用，请尝试：

$('<label>' + d.attr('name') + '</label>', { for: d.attr('id') })

http://jsfiddle.net/CL9Tt/

JQueryUI复选框无法点击？

1 个答案: