Вопросы Теги

Как сделать так, чтобы новый созданный элемент работал так же, как существующий элемент?

Вот несколько jQuery для публикации на php-страницу и возврата html: 

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});
0
задан Houy Narun 19 March 2019 в 03:17
поделиться

2 ответа

Вам не нужно динамически добавлять список. Напишите один раз, используйте его снова. 

$(document).ready(function() {
  
$('.list-inline').mouseleave(function(){
  $(this).hide();
})

$('body').on('mouseenter', '.item', function(e){
  var topPosition = $(this).position().top + 10;
  $('.list-inline').show().css('top', topPosition);
  
})

  $('body').on('click', '.icon-add', function() {
    // Add Item
    items = `
				<div class="item">
				  <h3 class="item-head" contenteditable>[Type Item Here] [label]</h3>
				  <p contenteditable>[Type what it does]</p>
				</div>
			`;
    // $('body').append(item);
    $('.item-container').append(items);
    return false;
  });

  $('body').on('click', '.icon-edit', function() {
    // Edit on Item
  });

  $('body').on('click', '.icon-remove', function() {
    // Remove Item and its definition

  });

  $('body').on('click', '.icon-move', function() {
    // Move item to up or down
  });

})
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}

.list-inline>li:last-child {
  padding-right: 25px;
}

.list-inline {
  background: trasparent;
  position: absolute;
  left: -110px;
  top: 12px;
  height: 40px;
}

div.item {
  position: relative;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row" style="position:relative">
      <div class="col-xs-12 item-container">
      
      
      <!-- list here -->
          <ul class="list-inline in-item" style="display:none;padding: 10px;">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
          
          
          
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

0
ответ дан Ibra 19 March 2019 в 03:17
поделиться

@Ibra, Большое спасибо за ваш полезный ответ. Я приму его в качестве ответа. Тем не менее, я хотел бы поделиться тем, что я нашел в отношении моего вопроса.

Согласно этому посту: «это возможно использовать jquery-on-and-hover» , я понял, что проблема в моем обработчике событий .hover(), который я назвал заполнить значки действий.

Поскольку .hover() плохо работает с динамическим элементом, созданным из JS, а также странно использовать .hover() в обработчике .on(), я не могу вызывать значок моего действия из динамического элемента.

Поэтому из предложенного ответа в посте выше, он работает, чтобы заменить .hover() следующим: 

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

Поэтому я изменил обработчик .hover() на обработчик событий .mouseenter() и .mouseleave() следующим образом 

/**
* Show Action Icons on Mouse over and hide it
* on Mouse out
*/
$('body').on({
    mouseenter: function () {
        //stuff to do on mouse enter
        $(ul).insertBefore($(this).find('.item-head'));
    },
    mouseleave: function () {
        //stuff to do on mouse leave
        $(this).find('ul.list-inline').remove();
    }
}, ".item");

Итак, моя заявка получилась такой 

$(document).ready(function() {
  var ul = `
					<ul class="list-inline in-item" style="padding: 10px;">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
				`;

  /**
   * Show Action Icons on Mouse over and hide it
   * on Mouse out
   */
  $('body').on({
    mouseenter: function() {
      //stuff to do on mouse enter
      $(ul).insertBefore($(this).find('.item-head'));
    },
    mouseleave: function() {
      //stuff to do on mouse leave
      $(this).find('ul.list-inline').remove();
    }
  }, ".item");

  $('body').on('click', '.icon-add', function() {
    // Add Item
    items = `
				<div class="item">
				  <h3 class="item-head" contenteditable>[Type Item Here] [label]</h3>
				  <p contenteditable>[Type what it does]</p>
				</div>
			`;
    // $('body').append(item);
    $('.item-container').append(items);
    return false;
  });

  $('body').on('click', '.icon-edit', function() {
    // Edit on Item
  });

  $('body').on('click', '.icon-remove', function() {
    // Remove Item and its definition

  });

  $('body').on('click', '.icon-move', function() {
    // Move item to up or down
  });

})
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}

.list-inline>li:last-child {
  padding-right: 25px;
}

.list-inline {
  float: left;
  background: trasparent;
  position: absolute;
  left: -110px;
  top: 12px;
  height: 40px;
}

div.item {
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row">
      <div class="col-xs-12 item-container">
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

Пожалуйста, дайте мне знать, если что-то не хватает или добавить. Благодаря

0
ответ дан Houy Narun 19 March 2019 в 03:17
поделиться