带有图像轮播的 jQuery 在单击图像时执行。为什么？答案

【问题标题】：jQuery with image carousel execute on click over image. Why?带有图像轮播的 jQuery 在单击图像时执行。为什么？
【发布时间】：2014-09-07 12:25:55
【问题描述】：

我正在尝试编写一个 javascript 以在用户单击图像获取您的 ID、用户名和密码后执行相同的步骤。之后，发送到我的脚本 php 将执行我的本地脚本。但我不知道出了什么问题，但即使单击一些 img 获取您的 id，填写表单我的 php 脚本调用后端脚本的时间与单击的图像相同。

我可以解释一下我需要做什么或有什么问题吗？

Javascript

/*--------------------------------------------------*/
/*      BACKEND SCRIPT                              */
/*--------------------------------------------------*/
$('#loginform').hide();

$('#limpar').click(function hideOrder() {
    $('#resultado').hide();
});

$('img').click(function getIdImage(event) {
    id_image = (this.id);
    alert(id_image);
    // Form Login
    $('#loginform').show().submit(function formInfo() {
    login = $('#login').val();
    senha = $('#senha').val();   
    $("#status").show().html("<img src='images/ajax-loader.gif' alt='Consultando ...' />");
        $.post(
        'contact_form/validateUser.php',
            { target:id_image, username: login, password: senha }, 
                function getDataBack(data) {
                    if (data.error) {
                        $('#retorno').html(data.error);
                        $('#status').hide();
                    } else {
                    $('#retorno').html(data);
                    $('#imagem').attr('src', '/Onepage/screenshots/' + login + '.png');
                    $('#resultado').show();
                    $('#status').hide(); }
            }, 'json');
        return false;
        login = $('#login').val("");
        senha = $('#senha').val("");
        id_image = val("");
    });
});

PHP：

<?php 
// Informations passes from form
$username = $_POST['username'];
$password = $_POST['password'];
$target = $_POST['target'];
$retorno = array();

// Execute
$run = "/usr/local/run/parser";
$script = "/var/run/back/$target";

// Check if POST is not null
if ( ($username == "") && ($password == "") ) {
    $retorno['error'] = "Os campos email e senha sÃ£o obrigatÃ³rios.";
    echo json_encode($retorno);
    return false;
}
// Execute to via asynchronous process
try {
    exec("{$run} {$script} {$username} {$password} 2>&1", $output);
} catch (Exception $e) {
    $retorno['error'] = "NÃ£o foi possivel acessar target!";
}
// Return Data if success
$retorno['success'] = $output;
echo json_encode($retorno);
?>

HTML：

<div class="col-lg-10">
    <div id="status" style="display: none;"></div>
    <div id="resultado" data-animated="fadeInUp" class="col-lg-12 col-sm-offset-2">
        <div id="retorno"></div>
        <img id="imagem" />
    </div>
</div>`enter code here`

【问题讨论】：

我有点困惑。您的 php 脚本被调用的次数与单击图像的次数相同？因为你有一个嵌套在点击事件中的 ajax 调用，所以这是意料之中的。
@JYG，即使有人被点击，我也想获得 id 图像。之后显示一个登录表单，将字段用户名和密码传递给我的 php 脚本，验证相同的信息并再次将用户名和密码的值传递给我在 casperJS 中的后端脚本。就是这样。

标签： javascript jquery ajax html ajaxform

【解决方案1】：

您应该给这些特定的图像一个类名，这样其他图像就不会错误地触发事件。其次，您可以使用 jQuery one OR on

$( ".imgclass" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
  // The event will be removed for the specific image
});

否则，如果您希望只触发一次您的请求，您应该使用 .one

$( ".imgclass" ).one( "click", function() {
  alert( "This will be displayed only once." );
  // No images will be able to trigger the event
});

来源：https://api.jquery.com/one/

【讨论】：