Question

如果我在页面周围有很多div，它们都有不同的ID，有些具有相同的类。我怎么能说双击网页上的任何地方我需要从我点击的元素中获取id或class或任何内容？

就像我说的那样：

$('div').dblclick(function(){

var x = $(this).attr('id');
});

我可以说像

$('body').dblclick(function(){

    var x = $(this).attr('id');
    });

Answer 1

你可以获取事件目标，这是触发事件的元素，然后获得最接近的DIV

$('body').dblclick(function(e){
    var x = $(e.target).closest('div').attr('id');
});

FIDDLE

Answer 2

您可以考虑在<body>元素的任意位置注册点击事件，然后查看目标以查看确切点击的内容：

$('body').dlbclick(function(e) {
    // You can adjust this to suit your needs
    var x = $(e.target).attr('id');
});

或者，如果您明确需要定位相对于该<div>元素的$('body').dlbclick(function(e) { // You can adjust this to suit your needs var x = $(e.target).closest('div').attr('id'); });元素，您可以找到最接近的元素并使用其ID：

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\grid\GridView;
use dosamigos\datepicker\DatePicker;
use kartik\select2\Select2;
use yii\helpers\ArrayHelper;
use frontend\models\Rmtemplate;

/* @var $this yii\web\View */
/* @var $model frontend\models\Rawmaterial */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="rawmaterial-form">

    <?php $form = ActiveForm::begin(); ?>
    <div class="form-group">
        <div class="col-xs-3 col-sm-3 col-lg-3">
            <?= $form->field($model, 'usedate')->widget(
                DatePicker::className(), [
                // inline too, not bad
                 'inline' => false, 
                 // modify template for custom rendering
                //'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
                'clientOptions' => [
                    'autoclose' => true,
                    'todayHighlight' => true,
                    'format' => 'yyyy-mm-dd'
                ]
            ]);?>
        </div>
        <div class="col-xs-9 col-sm-9 col-lg-9">
            <?= $form->field($model, 'productname')->widget(Select2::classname(), [
                'data' => ArrayHelper::map(Rmtemplate::find()->select('productname')->distinct()->orderBy(['productname' => SORT_ASC,])->all(),'productname','productname'),
                'language' => 'en',
                'options' => ['placeholder' => 'Select Charge...', 'id' => 'productid'],
                'pluginOptions' => [
                    'allowClear' => true
                ],
            ]); ?>
        </div>
        <div class="col-xs-12 col-sm-12 col-lg-12">
            <?= GridView::widget([
            'dataProvider' => $dataProvider2,
            'filterModel' => $searchModel2,
            'columns' => [
                ['class' => 'kartik\grid\CheckboxColumn'],

                //'id',
                //'productname',
                [
                'attribute'=>'productname',
                'filterType'=>GridView::FILTER_SELECT2,
                'filter'=>ArrayHelper::map(Rmtemplate::find()->orderBy(['productname' => SORT_ASC])->asArray()->all(), 'productname', 'productname'),
                'filterWidgetOptions'=>[
                'pluginOptions'=>['allowClear'=>true],
                                    ],
                'filterInputOptions'=>['placeholder'=>'Charge Name'],
            ],
                'rmname',
                'qty',

                //['class' => 'yii\grid\ActionColumn'],
            ],
        ]); ?>
        </div>
    </div>  



    <?= $form->field($model, 'rmname')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'useqty')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'unitcost')->textInput(['maxlength' => true]) ?>



    <?= $form->field($model, 'chargenumber')->textInput()->hiddenInput()->label(false) ?>



    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

<?php
/* start getting the chargeno */
$script = <<<EOD
  $(window).load(function(){
  $.get('index.php?r=rmprod/rawmaterial/get-for-chargeno',{ orderid : 1 }, function(data){
      //alert(data);
      var data = $.parseJSON(data);
      $('#rawmaterial-chargenumber').attr('value',data.chargeno);
  }
  );
});
EOD;
$this->registerJs($script);
/*end getting the chargeno */
?>

Answer 3

点击event bubbles，以便您use event delegation

$('body').on("dblclick","div",function(){
    var x = $(this).attr('id');
});

双击获取ID

3 个答案: