如何制作可见的 <div> 而不是阻止程序答案

【问题标题】：how to make a visible <div> and not blocker如何制作可见的 <div> 而不是阻止程序
【发布时间】：2011-07-23 15:39:08
【问题描述】：

我有一个 html 代码及其。

<input type="submit" class="sub" /><div class="img"></div>

现在的 CSS 代码是

.img{backgound: url(image.png);height:10px;width:10px;}

img 类位置（位于）提交。现在，当我尝试单击提交时（img 类已结束）。由于 img 类，它没有被点击。

现在我想让 div 类可见，但同时当我单击提交时它不会阻塞。

我不想在提交时使用背景，因为我已经在提交时使用它和另一张图片。

希望你能理解我。

我很抱歉我的英语......

谢谢，

【问题讨论】：

为什么不使用图像类型的输入？

标签： javascript jquery html css

【解决方案1】：

假设你的代码看起来像

<form id="myform" action="myaction.php">
...
<input type="submit" class="sub" /><div class="img"></div>
...
</form>

jquery：

$('#myform .img').click(function(){
   $('#myform').trigger('submit');
})

【讨论】：

【解决方案2】：

试试：

$('.img').click(function(){$(this.parentNode).click();});

【讨论】：

.img 元素不是相关元素的子元素，因此 parentNode 不会引用正确的元素。

【解决方案3】：

所以您想要在提交的顶部添加一个 img，并使其在您单击该 img 时仍然提交表单？如果是这样，那么您最好使用 JavaScript。这是使用 jQuery 的示例：

$('.img').click(function() {
        $('.img').siblings('[type=submit]').click();
});

这样，当您单击图像时，它的行为就好像您也单击了提交按钮。

关于这一点，必须有更好的方法来做到这一点（即没有 JavaScript 和额外的 div），但由于我对您的问题了解不多，所以我想不出任何东西。

【讨论】：

【解决方案4】：

如果您的按钮上已经有背景图片，并且您希望当您按下上面的 div 时 - 该按钮也将被按下，您需要这样做：

在您放置的 div 元素上：

onclick='simulateButtonPress();'

在 js 中：（通过 Jquery）

function simulateButtonPress()
{
    $("#btnId").trigger('click');
}

【讨论】：

【解决方案5】：

    $('.img').click(function() {
        $(this).prev('input.sub:submit').trigger('click');
    }); 

    // click event for submit

    $('input.sub:submit').click(function() { 

        // here goes you submit actions

        alert('submit');
    });

【讨论】：

【解决方案6】：

$('.img').click(function() {
    return true;
});

【讨论】：