javascript - 为什么 qtip2 工具提示中的 onclick 事件不起作用?

标签 javascript jquery button qtip2

在下面给出的 jsfiddle 链接中,有 2 个按钮,单击其中任何一个按钮都会显示一个工具提示。我希望工具提示内的按钮更改“删除”文本和“输入文本”的显示和其他属性(使文本字段可编辑)问题是该值确实更新,但文本仍然无法编辑“请提出问题的解决方案

JSFIDDLE

HTML

<button id="gear">Gear</button>
<button id="gear1">Gear</button>
<div style="display:none;" id="menu">
    <button class="menuitem">Rename</button><br>
    <input type= "text" id = "try" readonly = "true"><br>
    <div id = "delete" style = "display: block">Delete</div><br>
</div>

JavaScript

$(function() {
    $("#gear").button({
        icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
        },
        text: false
    }).qtip({
        content: {
            text: $('#menu')
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        style: {
            classes: 'ui-tooltip-dark ui-tooltip-shadow'
        },
        position: {
            my: 'top center',
            at: 'bottom center',
        }
    });
     $("#gear1").button({
        icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
        },
        text: false
    }).qtip({
        content: {
            text: $('#menu')
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        style: {
            classes: 'ui-tooltip-dark ui-tooltip-shadow'
        },
        position: {
            my: 'top center',
            at: 'bottom center',
        }
    });
    $(".menuitem").click(function(){
        document.getElementbyId("try").readOnly = false;
        document.getElementbyId("delete").style.display = none;                alert($(this).text());
    });
});​

CSS

#gear {
    margin:100px;
}
.menuitem {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 9px;
    margin-bottom: 3px;
    width: 75px;
}

最佳答案

我建议您使用 jquery 选择器:

$(".menuitem").click(function(){
    $("#try").attr('readonly', false);
    $("#delete").hide();
    alert($(this).text());
});

关于javascript - 为什么 qtip2 工具提示中的 onclick 事件不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11307223/

相关文章:

android布局对齐textview和button

javascript - Angular2使用指令动态插入html

javascript - 在鼠标悬停/取消悬停父元素时,更改子图像的 url 哈希

javascript - 新选项卡始终打开,甚至正常表单提交

php - php 网站的图像编辑器

android - 单击按钮后更新 TextView?

android - ViewPostImeInputStage ACTION_DOWN

javascript 显示服务器上忽略的模块模式

javascript - Google Charts 如何隐藏值 = 0

javascript - 强制 JSON.stringify 使用十进制表示法